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

Question

[Евгений Журов]

Добрый день. Никак не могу врубиться в некоторые принципы адаптивной верстки. Например, заданы какие-то параметры в медиазапросе от 320px:

@media (min-width: 320px) {
    h1 {
        font-size: 1rem;
    }
}

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

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

Answer 1

[Артур Карапетян]

Переходите на viewport-ы bootstrap-а и будт вам счастье. Воть

Answer 2

[Ankhena]

Есть разница между размером экрана и размером вьюпорта.
Посмотреть, например, тут viewportsizes.com
Для своего устройства https://www.esolutions.se/en-GB/test

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

Нет, как 1rem

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

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

Comments

[Евгений Журов]

Я имею в виду, на каждой точке существующих в реальности экранов - 320, 360, 480, 540, 640, 720, 750, 768, 980, 992, 1024 и так далее. Я знаю, что шрифт увеличивать необязательно (точнее, тут уже от проекта зависит), но не могу для себя "научно" объяснить, почему).

[Ankhena]

Евгений Журов:
1. Предположим, что мы знаем, что сейчас не бывает телефона с вьюпортом 330 точек. Но можем ли мы быть уверены, что его не будет и завтра? Если есть такая уверенность хотя бы на год-два, то можно не учитывать.
2. Но при этом браузер на десктопе может быть сжат до любого размера. Размеры меньше 500-600 точек можно считать неактуальными для этого варианта, а все остальное предположительно жизнеспособно.

Я знаю, что шрифт увеличивать необязательно (точнее, тут уже от проекта зависит), но не могу для себя "научно" объяснить, почему)

Потому что плотность пикселей увеличивает качество отображаемой картинки. А шрифт - это вектор, там всегда хорошее качество (опустим про сглаживание и плохие шрифты).

[Евгений Журов]

Ankhena W: Да, с качеством - тут вопросов нет. Тут дело в банальной читаемости. Меня просто сбивает с толку режим адаптивного дизайна в Хроме. Например, если я задам ширину страницы 750px, то увижу (если я правильно понимаю) отображение именно физических пикселей. Если же я уменьшу процент масштабирования (не задам другую ширину, а именно процент масштабированию уменьшу), то шрифт выглядит очень мелким. Но (если я опять же, правильно понимаю) - это ведь просто просто потому что браузер так рендерит? Т.е. на реальном экране того же шестого айфона я должен увидеть вполне адекватные размеры шрифта

[alvvi]

Евгений Журов:

тык

[Ankhena]

Евгений Журов:

если я задам ширину страницы 750px, то увижу (если я правильно понимаю) отображение именно физических пикселей.

Нет, вьюпорта

Если же я уменьшу процент масштабирования (не задам другую ширину, а именно процент масштабированию уменьшу), то шрифт выглядит очень мелким.

Да, логично. Если на десктопе нажимать Ctrl- , то тоже уменьшится масштаб. Читаемость - ну кому как нравится. Личное дело каждого. Если человек уменьшит масштаб до 10%, вас по прежнему будет заботить, что он ничего не увидит?

Т.е. на реальном экране того же шестого айфона я должен увидеть вполне адекватные размеры шрифта

Да, потому что у 6 файфона ширина вьюпорта в портретном режиме 320 точек.
Но если пальчиками начать уменьшать масштаб, то естественно, шрифт уменьшится тоже.
Если нет айфона, откройте сайт на любом другом смартфоне с аналогичным или близким размером вьюпорта и потестируйте. Шрифты будут вести себя одинаково (с точностью до рендеринга разных браузеров).