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

Делал верстку в 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
  • Вопрос задан
  • 6317 просмотров
Решения вопроса 1
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Вы неправильно настроили панель разработчика. У мобильных телефонов количество физических пикселей больше, чем количество «css-пикселей» в браузере. Разница выражается параметром Device Pixel Ratio (DPR) — это коэффициент умножения, сколько физических пикселей в одном «css-пикселе».

take.ms/v1Ms8

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

Вам надо включить отображение DPR и доработать верстку на малых экранах от 540 до 320px.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@lonata Автор вопроса
Павел Радьков, хм,интересно, а как узнать этот DPR своего смартфона?
Ответ написан
KazeZlat
@KazeZlat
Погромист-затейник
Потому что CSS-пиксель не всегда совпадает с реальным. Размер своего вьюпорта можете посмотреть на viewportsizes.com/mine
Ответ написан
Комментировать
Вот табличка размерностей кранов. По факту при построении интерфейса не всегда размер ожидаемый совпадает с размером фактическим. Зачастую используется масштабирование. Например, в iphone 6 вместо физических 750 пикселей при построении сайта используется масштабирование в два раза - отображается сайт в режиме 375px в ширину. А для iphone 5 необходимо адаптировать сайт под 320px
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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