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

    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.
    Ответ написан
    7 комментариев