Intereting Posts
Проверка fragmentа HTML с помощью html5lib Uncaught URIError: URI malformed – вкладки пользовательского интерфейса jquery в Windows Как установить thymeleaf th: значение поля из другой переменной Извлечь дочерние узлы определенного типа схемы из управления вводом задерживать событие mouseenter и увеличивать событие, если мышь внутри элемента Как экспортировать и сохранять связанные Jupyter ноутбуки? Добавить Div’s Click с помощью счетчика и лимита Браузер Chrome не показывает изображения, созданные обработчиком HTTP как отправить параметр, выбранный из выпадающего списка на странице jsp, для выполнения запроса mysql Почему я не могу вызвать функцию с именем clear из атрибута onclick? как добавить изображение в фоновом режиме из css из папки? Почему мой HTML h1-элемент охватывает две строки, когда у него достаточно места для его использования? Разница между и с помощью text-align: center ;? HTML-свойство братьев и сестер, не меняющихся с помощью JS Изображение слайд-шоу на модальном изображении

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

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

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

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

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

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

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

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

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

настройка вертикальной панели

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

Инспектор состыкован с вертикальной компоновкой панели

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

Настройки разрешения устройства

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

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

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


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

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

Open! 

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

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

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

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

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

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

Значок эмуляции Chrome

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

введите описание изображения здесь

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

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

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

-> resize адресной строки (где вы вводите 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);})() 

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

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

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

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

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

Я нашел быстрое решение для этого.

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

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

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