it-swarm.com.ru

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

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

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

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

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

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

126
Brodie

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

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

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

vertical panel layout setting

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

Inspector docked to right with vertical panel layout

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

Device resolution settings

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

222
Oisin Lavery

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

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


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

36
Chamika Sandamal

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

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

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

16
nayan9

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

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

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

14
drinkdecaf

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

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

Chrome Emulation icon

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

enter image description here

10
gl03

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

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

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

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

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

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

2
Tamer Güner

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

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

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

1
Aniket Sengar

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

1
number5

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

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

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

0
christoshrousis

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

0
Markus

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

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

 The devtools button

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

0
Mike Poole