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

Question

[lonata]

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

spoiler

скрин с браузера Chrome

spoiler

скрин со смартфона

spoiler

Comments

[Dymok]

Думаю, стоит попробовать поставить зум в инструментах разработчика на 100%, а не 60%

[lonata]

UnluckySerivelha, ставил, не помогает, зум этот менял по всякому, в браузере отображается нормально, а вот на смартфоне плывет

Answer 1

[Павел Радьков]

Вы неправильно настроили панель разработчика. У мобильных телефонов количество физических пикселей больше, чем количество «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.

Comments

[sim3x]

Загрузите картинку на хабрасторадж

[Павел Радьков]

sim3x хабрасторадж не поддерживает видео

[sim3x]

Павел Радьков, гиф до 5мб вроде как кушает

[Darya Shvakh]

Павел Радьков, но при изменении имитирующего устройства, DPR для выбранного устройства меняется автоматически!?

[Павел Радьков]

Daria Shvakh, да, меняется. Можно добавить через настройки своё устройство с нужными параметрами

[Darya Shvakh]

Павел Радьков, Спасибо!

[Simplelamer8]

Здравствуйте! надеюсь что получу ответ спустя уже 3 года. я Свой смартфон полностью настроил на дев тулс но все равно имеются отличия от самой страницы на смартфоне. смартфон у меня Xiaomi poco x3 pro DPR = 3.0 360x714. Установил эти значения

Answer 2

[lonata]

Павел Радьков, хм,интересно, а как узнать этот DPR своего смартфона?

Comments

[Павел Радьков]

Откройте на телефоне myresolutionis.ru

[lonata]

Павел Радьков, теперь догнал в чем причина)



Благодарю за помощь!

Answer 3

[KazeZlat]

Потому что CSS-пиксель не всегда совпадает с реальным. Размер своего вьюпорта можете посмотреть на viewportsizes.com/mine

Answer 4

[Дмитрий Ермолаев]

Вот табличка размерностей кранов. По факту при построении интерфейса не всегда размер ожидаемый совпадает с размером фактическим. Зачастую используется масштабирование. Например, в iphone 6 вместо физических 750 пикселей при построении сайта используется масштабирование в два раза - отображается сайт в режиме 375px в ширину. А для iphone 5 необходимо адаптировать сайт под 320px