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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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