Как (и надо ли) учитывать технические характеристики экранов телефонов при мобильной верстке?

Добрый день. Никак не могу врубиться в некоторые принципы адаптивной верстки. Например, заданы какие-то параметры в медиазапросе от 320px:
@media (min-width: 320px) {
    h1 {
        font-size: 1rem;
    }
}


Если смотреть в браузере, в инструментах разработчика, то при указанной физической ширине все выглядит ок. Если установить ширину в браузере как 750px (которая суть тоже телефон - например, шестой айфон - 750х1334), то, разумеется, все чертовски мелко. Но физическая ширина в реальности ведь не равна 750 - она все равно остается 320 или 360, я правильно понимаю?
Иначе говоря, нет никакого смысла увеличивать шрифт на нескольких точках перехода от 320 до 768, например? Телефон сам разберется, как ему рендерить все это дело? При условии прописанного viewport.

И вторая часть вопроса - как все это безобразие (например шрифт 1rem) отображается на retina-экранах? Действительно ли как 2rem, раз retina удваивают плотность пикселей?
  • Вопрос задан
  • 210 просмотров
Пригласить эксперта
Ответы на вопрос 2
@architawr
"Ok, Google" и все твои проблемы решены
Переходите на viewport-ы bootstrap-а и будт вам счастье. Воть
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Есть разница между размером экрана и размером вьюпорта.
Посмотреть, например, тут viewportsizes.com
Для своего устройства https://www.esolutions.se/en-GB/test

И вторая часть вопроса - как все это безобразие (например шрифт 1rem) отображается на retina-экранах? Действительно ли как 2rem, раз retina удваивают плотность пикселей?

Нет, как 1rem
Иначе говоря, нет никакого смысла увеличивать шрифт на нескольких точках перехода от 320 до 768, например?

По-моему, это не "несколько точек", а "больше чем в 2 раза больше".
Уточните, что вы хотели спросить.
Ответ написан
Ваш ответ на вопрос

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

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