2

Необходимо сверстать адаптивный сайт с учетом качественного отображения на экранах с retina.

Примеров, как адаптировать под это дело изображения, валом и вроде вопросов не возникает. Не понимаю одного: почему текст с размером шрифта в 32px на экране iPhone весьма и весьма велик, хотя насколько я понимаю, учитывая двойню плотность пикселя шрифт должен вроде как уменьшиться? Приемлемого результата достигаю только в случае уменьшения шрифта в два раза.
Подскажите, пожалуйста, что я не так делаю?

в HTML прописываю метатег:

meta name="viewport" content="width=device-width, initial-scale=1.0">

в CSS я родительскому элементу задаю базовый размер шрифта

html, body {
    font-size: 16px;
}

а дальнейшие размеры шрифтов задаю в относительных единицах em:

.text {
    margin-right: 2em;
    margin-left: 2em;
}

В итоге на iPphone смотрится очень убого и приходится использовать следующую конструкцию:

@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 568px), 
screen and (-moz-min-device-pixel-ratio: 2) and (max-width: 568px),
screen and (-ms-min-device-pixel-ratio: 2) and (max-width: 568px),
screen and (-o-min-device-pixel-ratio: 2) and (max-width: 568px),
screen and (min-device-pixel-ratio: 2) and (max-width: 568px) {
html, body {
        font-size: 8px;
    }
/**
 * и далее уменьшаю все размеры в 2 раза,
 * что в px, но как я понимаю такого быть не должно
 */
}

И вроде смотрится норм... Подогнал, проверил, но проблема в том, что мне еще надо и сверстать под iPad, а вот его у меня нету и черт его знает, как правильно сверстать. В наличии только iPad 2 без ретины.

Я так понимаю все надо вручную перебивать. Размер в 70px огромный как на обычном устройстве, так и почему-то на устройствах с retina.

Проверял. Создал блок в 640px и на iPhone 5 (разрешение 640 на 960). Он создал мне горизонтальную прокрутку размером на два экрана.

2
  • Размеры CSS-пикселей на устройствах с Retina ополовинены. Иначе говоря, блок в 320px займет всю ширину экрана iPhone. Не нужно менять размеры шрифтов под Retina дисплеи. Нужно подгружать картинки двойного размера habrahabr.ru/post/150071
    – Nitive
    1 апр 2015 в 16:31
  • вот вы говорите что 320px займет всю ширину экрана при условии что физическое расширение экрана составляет 640х960, т.е. получается как бы размер блока физически увеличивается в 2 раза и я так понимаю, что если хочу отобразить шрифт высотой в 12рх (на десктопе) то для ретины я должен указать 6рх? 1 апр 2015 в 17:47

2 ответа 2

2

Так как нет примеров верстки, то могу только предположить пару вариантов.

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

Если у вас макет для мобильных 640px в ширину (некоторые дизайнеры так делают, что бы сразу подготовить графику в растре для ретины), при том, что он реально должен быть в два раза меньше (320px), то можно использовать такой тег для указания viewport'a:

<meta name="viewport" content="width=640, initial-scale=0.5, minimal-ui">

Тогда не нужно будет переделывать верстку.

Другой возможный момент - если у вас нет как таковой мобильной версии верстки, то нужно просто убрать тег viewport'a.

Еще вариант - у вас проблема font boosting, http://habrahabr.ru/post/214559/

0

Мобильный сафари увеличивает размер текста, это можно отключить:

body {
    ‑webkit‑text‑size‑adjust: 100%
}

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.