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

Делал верстку в 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
  • Вопрос задан
  • 965 просмотров
Решения вопроса 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
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
от 40 000 до 80 000 руб.
Adcome Москва
До 120 000 руб.
Valoreum Москва
от 80 000 до 80 000 руб.
17 авг. 2018, в 10:48
2500 руб./за проект
17 авг. 2018, в 10:46
50000 руб./в месяц
17 авг. 2018, в 06:14
40 руб./за 1000 зн.