Браузер не масштабується нижче 400 пікселів?

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

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

Мені було цікаво, чи хтось знає, чи це річ у браузері / настільному комп’ютері чи якщо я повинен дивитись на щось інше, ніж мій CSS У мене немає жодної декларації мінімальної ширини, тому я не впевнений, що може це спричинити.

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

-edit- Крім того, я не впевнений, що це має значення, але Opera дозволяє йому масштабуватись до майже нічого ... Отже, він працює з Opera, а не в Chrome або FF ... будь-які ідеї?

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

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

Оновлення: Chrome тепер дозволяє розташовувати вікна інспектора вертикально при стикуванні праворуч! Це дійсно покращує макет.

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

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

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

це може бути через добавки, встановлені у вашому браузері. видаліть або прихойте всі значки додатка з панелі інструментів і спробуйте змінити розмір. коли є веб-переглядач Addons, змінюйте розмір лише адресного рядка і зберігає видимість Addons.

Оновлення: 14.07.2013

З останньою версією хромування тепер ви можете змінити розмір адресного рядка, і він автоматично приховає аддони.

Я також був спотиканий, але закінчився простим рішенням. Я щойно створив 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');})();

І дайте йому назву "Відкрити невелике вікно" чи щось подібне. Це дозволить вам легко відкривати вікна без обмежень розміру в хромі. Зауважте, що просто скопіювати це у свій адресний рядок не вийде - хром позбавить "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);})()

Я знайшов для цього швидке вирішення.

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

Посилання тут: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

У мене виникли подібні проблеми і я просто знайшов хорошу роботу. Відкрийте свої хромовані розробники та вгорі ліворуч є маленький значок екрана та ipad. Клацніть це, і це відкриє мобільний вигляд вашої сторінки. Ви можете встановити його на попередньо визначені пристрої або на власну роздільну здатність. Насправді дуже вишуканий.

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

Мені подобається цей інструмент, тому що він дозволяє швидко перемикатися, а також легко перемикається між портретними / горизонтальними для мобільних розмірів. Це також дозволяє зробити персоналізовану закладку дозволеною, тому якщо ви часто розробляєте незрозумілі резолюції, ви можете їх зберегти та використовувати.

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

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

Я завжди стикаюся з цим питанням із закріпленими вкладками. Chrome не змінить розмір нижче горизонтальної ширини восьми видимих ​​закріплених вкладок, якщо такі є! Просто від'єднайте вкладку, яку ви хочете змінити, щоб вирішити цю проблему ...

Це мій перший внесок у співтовариство stackoverflow та його старання повернути всім вам чудових людей, які зробили Інтернет таким потужним інструментом. Тепер до коментаря: Safari, має цю цікаву функцію. Потрібно активувати параметр розробника сафарі в налаштуваннях. Знімок екрана налаштування параметрів у Safari для активації меню розробника

Після активації ви можете отримати доступ до великої кількості потужних інструментів для розробників. Одним із цих інструментів є налаштування Viewport, яке може використовуватися для перевірки чутливості макета вашого веб-сайту. Щоб активувати тестування на чуйному викладі, можна скористатися скороченим Cmd + ctr + R, щоб активувати параметр налаштування порту перегляду сафарі. Це дасть вам достатній контроль для тестування вашого веб-сайту на різні розміри портів перегляду.

Знімок екрана того, як буде виглядати вікно вашого веб-переглядача, коли активується тестовий варіант тестування макета.

1. Посилання на те, як активувати меню розробника в сафарі: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

Дуже багато смартфонів масштабують сторінку, щоб відповідати їх розміру екрана за допомогою масштабування. Ваша мінімальна ширина сторінки, ймовірно, 400 пікс. Без жодного прикладу коду, я думаю, що це все, що можна сказати.