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

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

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

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

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

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

Ответ 1

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

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

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

vertical panel layout setting

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

Inspector docked to right with vertical panel layout

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

Device resolution settings

UPDATE. Вот еще один отличный инструмент, с которым я столкнулся. http://lab.maltewassermann.com/viewport-resizer/

Ответ 2

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

Обновление: 7/14/2013


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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Chrome Emulation icon

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

enter image description here

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

Я ленив, чтобы сделать его еще проще, пусть буклет-буклет задает пользователю размеры: -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);})()

Ответ 9

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

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

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

Ответ 10

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

Ответ 11

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

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

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

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

The devtools button

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

Ответ 15

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