@lonata

Почему не совпадает верстка с реальными устройствами?

Делал верстку в Chrome с помощью инструментов разработчика. Для медиа запросов ставил в панели разработчика нужное разрешение и галку responsive и смотрел результат. Для всех популярных разрешений верстка выглядит хорошо, проверял верстку на браузерах Chrome, Opera, Mozilla Firefox, Яндекс браузер, Internet Explorer. Менял также ширину окна на всех этих браузерах и верстка по-преженму выглядит хорошо и никаких горизонтальных скроллов нет.
НО! когда открываю сайт на своём смартфоне Dooggee titans 2(540x960) Android 4 верстка плывет, также плывет и на таких ресурсах как iloveadaptive.com
В чём причина такого поведения? почему не сходится результат?
может ли быть причина вот в этом?

spoiler
5af5ccb6ae8c0262745269.jpeg


скрин с браузера Chrome
spoiler
5af5cb3a8b90e328169234.jpeg


скрин со смартфона
spoiler
5af5cb5b4d8fe051412826.png
  • Вопрос задан
  • 858 просмотров
Реклама
Реклама
Решения вопроса 1
  • paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Вы неправильно настроили панель разработчика. У мобильных телефонов количество физических пикселей больше, чем количество «css-пикселей» в браузере. Разница выражается параметром Device Pixel Ratio (DRP) — это коэффициент умножения, сколько физических пикселей в одном «css-пикселе».

    take.ms/v1Ms8

    В режиме Responsive у Хрома по-умолчанию DPR=1.0 (у макбука по-умолчанию 2.0, т.к. retina-экран). Вы выставили ширину вьюпорта 540px, но у вашего телефона, скорее всего, DPR = 1.5 и разрешение в браузере соответствует 360px (540 / 1.5 = 360).

    Вам надо включить отображение DPR и доработать верстку на малых экранах от 540 до 320px.
    Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Реклама