Необходимо сверстать адаптивный сайт с учетом качественного отображения на экранах с 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). Он создал мне горизонтальную прокрутку размером на два экрана.