Браузер не масштабируется ниже 400px?

Question

Браузер не масштабируется ниже 400px?

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

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

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

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

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

763 13

html css layout liquid-layout

13 ответов:

Comments

Ничего не найдено.

Oisin Lavery · Accepted Answer · 2013-07-30 19:34:33

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

закрепите веб-инспектор справа а не на дно

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

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

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

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

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

Chamika Sandamal · Accepted Answer · 2013-07-14 13:35:07

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

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

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

nayan9 · Accepted Answer · 2012-06-06 04:31:51

Я тоже был в тупике, но в итоге получил простое решение. Я только что создал HTML-файл со ссылкой, чтобы открыть новое окно:
<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>
в этом новом окне нет ничего, кроме адресной строки, и Chrome позволяет мне свободно изменять размер до 111x80.

drinkdecaf · Accepted Answer · 2012-07-03 18:00:34

решение nayan9 отлично работает и может быть помещено в закладку без необходимости создавать html-файл. В Chrome создайте новую закладку с URL:
javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();
и дать ему имя "открыть маленькое окно" или что-то подобное. Это позволит вам легко открывать окна без ограничений по размеру в chrome. Обратите внимание, что просто копирование этого в адресную строку не будет работать - chrome удаляет "javascript:".

gl03 · Accepted Answer · 2014-09-02 17:21:45

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

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

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

nils · Accepted Answer · 2012-09-07 01:13:47

добавление к тому, что nayan9 и drinkdecaf сказал, Вы можете просто бросить документ.URL-адрес в окне вызова.откройте страницу, которую вы сейчас просматриваете в окне 320. Вы можете добавить еще немного к ширине, если вы ожидаете полосу прокрутки.
javascript:(function(){window.open(document.URL, '','width=320,height=480');})();

Tamer Güner · Accepted Answer · 2012-05-15 01:35:31

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

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

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

Rob Boerman · Accepted Answer · 2013-01-10 11:24:22

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

number5 · Accepted Answer · 2013-11-25 17:03:58

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

christoshrousis · Accepted Answer · 2014-02-25 03:45:41

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

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

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

Markus · Accepted Answer · 2016-09-14 10:57:31

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

Aniket Sengar · Accepted Answer · 2018-07-31 16:00:24

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

просто установите надстройку адаптивного веб-дизайна в Chrome, и она откроет отдельное окно без адресной строки и вкладок, которое можно уменьшить до 10 px или меньше.

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

user372719 · Accepted Answer · 2012-01-08 05:51:03

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