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

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

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

Вопроса два. Почему так происходит? И где надежно проверять верстку под разные разрешения экранов?
  • Вопрос задан
  • 249 просмотров
Решения вопроса 1
alexgp13
@alexgp13
Руководитель ИТ-проектов
Самое надежное - на реальных устройствах и реальных браузерах, в крайнем случае - на надежных эмуляторах.
Но в целом, если быть аккуратным при разработке, то Dev Tools в Crome довольно аккуратно показывает результат. Не забывайте перезагружать страницу после изменения параметров экрана.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Anarchy
В пэйнте я замерил ширину правой колонки. И хотя dev tool говорит, что ширина 152px (как я и указал в CSS), в действительности ширина 175px - отсюда и результат, что не две колонки не умещаются.

Скорее всего в пэйнте замерял криво) Без примера кода тебе никто не поможет.
Ответ написан
Комментировать
alaskafx
@alaskafx
Не .do Frontend
Существует некоторый сброс того, что якобы показывает эмулятор девтулс: ctrl + 0 или же ctrl + +
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы