Как проверять верстку под мобильные устройства, если dev tools вводит в заблуждение?

Question

[низкомолекулярный макрос]

Настал момент адаптировать desktop-first верстку под мобильные устройства. За самый минимум взял 320px (кстати, поправьте, если за минимум нужно брать другой размер). И заметил, что в инструментах разработчика Google Chrome неправильно отображаются размеры... то ли элементов, то ли экрана. Пример на картинке



Ширина экрана 320px, колонки по 152px + 8px grid gap + 4 padding самого grid-контейнера по бокам. Но колонки просто не помещаются на экране. Даже если убрать gap и padding - этого все равно не хватает для того, чтобы колонки поместили на экране.
В пэйнте я замерил ширину правой колонки. И хотя dev tool говорит, что ширина 152px (как я и указал в CSS), в действительности ширина 175px - отсюда и результат, что не две колонки не умещаются.

Вопроса два. Почему так происходит? И где надежно проверять верстку под разные разрешения экранов?

Answer 1

[Александр Прохорович]

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

Comments

[низкомолекулярный макрос]

Не забывайте перезагружать страницу после изменения параметров экрана.

ничего не помогает для Chrome. Но вот в Mozilla все отображается верно. Только где гарантии, что Mozilla не подведет в чем-нибудь другом.

на надежных эмуляторах

не подскажите хорошие, но бесплатные варианты?

[Александр Прохорович]

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

Из эмуляторов - я пользуюсь эмуляторами из комплекта поставки Android Studio для Android и из Xcode для iOS. И тот, и другой полностью бесплатный (Xcode правда требует Mac, хотя теоретически он работает и на хакинтоше)

[низкомолекулярный макрос]

Александр Прохорович, спасибо вам))

Answer 2

[Anarchy]

В пэйнте я замерил ширину правой колонки. И хотя dev tool говорит, что ширина 152px (как я и указал в CSS), в действительности ширина 175px - отсюда и результат, что не две колонки не умещаются.

Скорее всего в пэйнте замерял криво) Без примера кода тебе никто не поможет.

Answer 3

[alaskafx]

Существует некоторый сброс того, что якобы показывает эмулятор девтулс: ctrl + 0 или же ctrl + +

Comments

[низкомолекулярный макрос]

с масштабом все ок