Браузер не масштабируется ниже 400 пикселей?


151

Я работаю над составлением жидкой таблицы стилей, и она прекрасно работает. Одна вещь, которую я заметил, это то, что размер окна моего браузера в Chrome не будет меньше 400 пикселей, он просто застревает там, а в FF, когда я уменьшаю его, он просто останавливается на отметке 400 пикселей, а затем появляется горизонтальная полоса прокрутки.

Когда я открываю сайт на своем телефоне, он выглядит идеально на уровне около 320 пикселей, поэтому я знаю, что он масштабируется ниже 400 пикселей.

Мне было бы любопытно, если бы кто-нибудь знал, если это браузер / настольный компьютер или я должен смотреть на что-то другое, чем мой CSS. У меня нет объявлений минимальной ширины, поэтому я не уверен, что может быть причиной этого.

Снова на рабочем столе он уменьшается до минимальной ширины около 400 пикселей и останавливается, но когда я открываю его на своем телефоне, он масштабируется до размера экрана телефона, который составляет примерно 320 пикселей ... Любопытно, почему, по крайней мере, он выиграл не уменьшать до 320px на рабочем столе.

-edit- Также я не уверен, имеет ли это значение, но Opera позволяет уменьшить его до практически ничего ... Итак, он работает с Opera, а не с Chrome или FF ... Есть идеи?


1
Я помню, что раньше Chrome складывался в крошечный кирпич. Так что это то, что было намеренно введено. На текущем Chrome я вижу, что окно будет иметь только маленький верхний ряд иконок. Сокрытие значков кнопки «Домой» или расширений позволяет мне сделать его немного меньше.
Мртшерман

7
Это будет что-то конкретное в вашей CSS и разметке. Без обзора ничего не возникает. Съемка догадок в темноте не совсем полезный подход. В этом случае вам нужно будет отлаживать самостоятельно.
Джаред Фарриш

3
Да, я почти уверен, что это просто собственная минимальная ширина окна браузера, как и у большинства программ минимальная ширина, до которой можно изменять размеры. Похоже, что мой Chrome не может изменить размер окна просмотра меньше 250 пикселей.
Justisb

1
Chrome 33 установил его обратно в 400px
Sparkup

4
«Это будет что-то конкретное в твоих CSS и разметке» ... Эмм, нет, на самом деле это не так.
Стейн де Витт

Ответы:


253

Chrome не может изменить размер по горизонтали ниже 400px (OS X) или 218px (Windows), но у меня есть действительно простое решение проблемы:

  1. Подключите веб-инспектор вправо, а не вниз
  2. Изменение размера панели инспектора - теперь вы можете сделать область браузера очень маленькой (до 0 пикселей)

Обновление: теперь Chrome позволяет расположить окна инспектора по вертикали, когда они прикреплены вправо! Это действительно улучшает макет.

настройка вертикальной панели

Панели HTML и CSS подходят очень хорошо, и вы даже открываете небольшую консольную панель. Это позволило мне полностью перейти с Firefox / Firebug на Chrome.

Инспектор пристыкован вправо с вертикальной компоновкой панели

Если вы хотите пойти еще дальше, посмотрите настройки веб-инспектора (значок cog, справа внизу) и перейдите на вкладку агента пользователя . Здесь вы можете установить любое разрешение экрана и даже быстро переключаться между книжным и альбомным режимами.

Настройки разрешения устройства

ОБНОВЛЕНИЕ : Вот еще один действительно крутой инструмент, с которым я столкнулся. http://lab.maltewassermann.com/viewport-resizer/


1
+1 Инспектор идеально подходит для этого, даже позволяет устанавливать user-agent и т. Д.
GDmac

2
Ты человек. И еще проще отладить маленький экран, когда есть соответствующее большое окно инспектора.
aebersold

1
Спасибо @aebersold Да, это хороший бонус, когда вы получаете большое окно инспектора при работе с мобильными макетами.
Ойсин Лавери

3
ИМО это должен быть принятый ответ. Идея проста и гениальна, и ваша подсказка над переопределением метрик потрясающая. Как и букмарклет, с которым вы связаны!
Marlar

5
Кто-нибудь еще не мог понять, как правильно закрепить инструменты разработчика? stackoverflow.com/questions/10023640/…
Эрти-Крис Элмаа

36

это может быть из-за аддонов, которые вы установили в своем браузере. удалите или скройте все значки аддона на панели инструментов и попробуйте изменить размер. при наличии аддонов браузер только изменяет размер адресной строки и сохраняет аддоны видимыми.

Обновление: 14.07.2013


В последней версии Chrome теперь вы можете изменить размер адресной строки, и она автоматически скрывает надстройки.


4
когда есть надстройки, браузер изменяет размер только до размера адресной строки и сохраняет надстройки видимыми. надеюсь, вы понимаете это. это не побочный эффект аддонов. но при наличии установленных дополнений браузер не может изменить размер до минимального значения. из-за значков аддона рядом с адресной строкой.
Чамика Сандамал

2
Удаление всех значков аддона в Chrome не решило это для меня. Решение Nayan9 сделал.
Эндрю Шунер

31
Это не ответ . Даже если все дополнения / расширения отключены, минимальная ширина Chrome составляет 400 пикселей.
Ойсин Лавери

4
@ChamikaSandamal это не правильно. ОП пытается масштабировать свое окно ниже 400 пикселей. В Chrome это невозможно, поскольку минимальная ширина браузера составляет 400 пикселей. Единственный способ добиться эффекта, который ищет ОП - это ответ Шерпанаута. Ваш ответ не делает ничего, кроме того, что он помогает пользователю приблизиться к жесткой минимальной ширине 400 пикселей, а это не то, что ищет ОП.
Фред Стивенс-Смит

2
@ChamikaSandamal, хотя он может работать для вас, он не работает для всех нас. Это ничего против тебя. Просто этот ответ не решает проблему для многих из нас.
DA.

19

Я тоже был в тупике, но в итоге нашел простое решение. Я только что создал файл HTML со ссылкой, чтобы открыть новое окно:

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

Это новое окно не имеет ничего, кроме адресной строки, и Chrome позволяет мне свободно изменять его размер до 111x80.


1
LOL, поговорим о том, как взломать простую вещь
Отто

17

Решение nayan9 прекрасно работает и может быть помещено в закладки без необходимости создания html-файла. В Chrome создайте новую закладку с URL:

javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();

И дайте ему имя «Открыть маленькое окно» или что-то подобное. Это позволит вам легко открывать окна без ограничений по размеру в Chrome. Обратите внимание, что просто скопировать это в адресную строку не получится - Chrome удаляет «javascript:».


Это ответ, который работал для меня. Полезно для того, чтобы размер Tweetdeck был как можно меньше.
Круг

10

Если вы хотите уменьшить ширину экрана, чтобы эмулировать разные устройства (и почему еще вы хотите это сделать?):

Chrome теперь имеет раздел «Эмуляция» в своем инспекторе, который активируется нажатием на маленький значок телефона в верхней строке меню (между увеличительным стеклом и элементами):

Значок Chrome Emulation

Режим эмуляции позволяет вам установить размер окна просмотра для всех распространенных размеров экрана мобильного телефона, среди других приятных функций, таких как эмуляция касания, геолокации и даже акселерометр:

введите описание изображения здесь


Самое впечатляющее, я не знал об этой функции ... наконец-то я могу избавиться от переключателя user-agent и правильно эмулировать мобильные устройства, спасибо! +10 к этому
andreszs

Эта функция заменена на «Панель инструментов устройства» stackoverflow.com/a/44194243/1175496
Красная гороха

6

В дополнение к тому, что сказали nayan9 и drinkdecaf, вы можете просто добавить document.URL в вызов window.open, чтобы увидеть страницу, которую вы сейчас просматриваете в окне 320. Возможно, вы захотите добавить еще ширину, если вы ожидаете полосу прокрутки.

javascript:(function(){window.open(document.URL, '','width=320,height=480');})();

3

DevTools в Chrome существенно продвинулись с того времени, когда большинство этих ответов были опубликованы. Лучший способ решить эту проблему сейчас - использовать эмуляторы, встроенные в Chrome.

Чтобы использовать эмуляторы, откройте DevTools (нажмите F12), а затем щелкните следующий значок, чтобы переключить Device Toolbar:

Кнопка devtools

Это позволит вам эмулировать любое мобильное устройство или размер окна просмотра.


2

в хроме иконки ваших аддонов в правом верхнем углу вызывают проблему

-> изменить размер адресной строки (где вы вводите URL) до максимальной ширины (перетащите панель по правому краю вправо)

или отключить значки


2

Мне лень, чтобы было еще проще, пусть букмарклет спросит у пользователя размеры :-D

javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()

1

Я нашел быстрый обходной путь для этого.

Просто установите надстройку Responsive Web Design в Chrome, и она откроет отдельное окно без адресной строки и вкладок, которое можно уменьшить до 10 пикселей или менее.

Здесь ссылка: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related


1

У меня были похожие проблемы, и я нашел хорошую работу. Откройте ваши chrome devtools и в верхнем левом углу есть маленький экран и значок ipad. Нажмите на него, и он откроет мобильный вид вашей страницы. Вы можете установить его на предопределенные устройства или пользовательское разрешение. Довольно изящно на самом деле.


0

Другое простое решение - нажать Strg + Shift + N, чтобы войти в режим инкогнито. Там вы можете изменить размер окна браузера, как вам нравится.


2
На Mac 10.9 Chrome 38.0.2125.104 это не так
гео-теория

1
В Linux Chromium 44.0.2403.89 это тоже не так
Икар Похорски

В Windows 8 Chrome версии 74.0.3729.131 (официальная сборка) (64-разрядная версия) это не так
The Red Pea

0

Мне нравится этот инструмент, потому что он позволяет быстро переключаться, а также легко переключаться между портретным и горизонтальным режимами для мобильных устройств. Это также позволяет вам создавать персональные закладки, поэтому, если вы часто создаете малоизвестные разрешения, вы можете сохранить их и использовать их.

Мне пришлось использовать один из этих инструментов, потому что даже с учетом вышеприведенного ответа я не смог правильно настроить масштаб окна до 320, но этот инструмент кажется более быстрым решением в целом.

http://lab.maltewassermann.com/viewport-resizer/


0

Я всегда сталкиваюсь с этой проблемой с закрепленными вкладками. Chrome не изменит размер ниже горизонтальной ширины восьми видимых закрепленных вкладок, если они есть! Просто отсоедините вкладку, размер которой вы хотите изменить, чтобы решить эту проблему ...


0

Это мой первый вклад в сообщество stackoverflow, и я стараюсь отдать всем вам замечательные люди, которые сделали Интернет таким мощным инструментом. Теперь для anser: Safari, есть эта классная функция. Вам необходимо активировать опцию разработчика Safari в настройках. Снимок экрана настройки параметров в Safari для меню разработчика actiave

После активации вы можете получить доступ к куче очень мощных инструментов разработчика. Одним из таких инструментов является настройка видового экрана, которая может использоваться для проверки адаптивного макета вашего сайта. Чтобы активировать тестирование адаптивной планировки, можно использовать комбинацию клавиш Cmd + ctr + R, чтобы активировать настройку порта просмотра Safari. Это даст вам достаточный контроль, чтобы протестировать ваш сайт на разных размерах портов.

Снимок экрана, показывающий, как будет выглядеть окно вашего браузера после активации опции адаптивного теста макета.

  1. Ссылка на то, как активировать меню разработчика в Safari: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

-4

Многие смартфоны масштабируют страницу, чтобы соответствовать размеру экрана, используя масштабирование. Ваша минимальная ширина страницы, вероятно, составляет 400 пикселей. Без примера кода, я думаю, это все, что можно сказать.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.