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

Question

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

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

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

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

---

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

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

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

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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

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

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

Answer 10

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