Проблема размера шрифта с iPhone

Question

Я сейчас работаю над мобильной версией веб-сайта, все отлично, отлично работает на iPhone, Blackberry и Android.

У меня есть одна небольшая проблема, не большая, но все же немного раздражающая. У меня есть:

<h1> теги размером 18px и полужирным шрифтом
<h2> теги установлены на 12 пикселей и полужирный
<p> теги установлены на 12px и нормальные

Теперь на iPhone все выглядит отлично при просмотре в портретной ориентации, но когда устройство поворачивается в горизонтальное положение, заголовки <h1> становятся меньше (трудно сказать, но, возможно, меньше тегов <h2>?!

Вот мой css:

h1 {
 color:#FFFFFF;
 font-size:18px;
 line-height:22px;
 font-weight:bold;
 margin-top:0px;
}

h2 {
 font-size:12px;
 color:#333333;
 font-weight:bold;
 margin-bottom:-5px;
}

p {
 color:#333333;
 font-size:12px;
 line-height:18px;
 font-weight:normal;
}

Answer 1

Полагаю, вы ищете это в своем CSS:

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

Answer 2

Лучшим решением может быть использование 100% вместо ни одного, как заявлено пользователем 612626 в более старой теме: Несоответствия при отображении размера шрифта на iPhone

body {
    -webkit-text-size-adjust: 100%;
}

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

Надеюсь, это поможет.

Answer 3

Как указано в ответе Neurofluxation, вы можете использовать правило css -webkit-text-size-Adjust, но имейте в виду, что это может помешать пользователям также регулировать размер шрифта в настольном Webkit (см. в этой статье для подробнее).

В свете этого, вероятно, стоит проверить с помощью медиазапросов CSS3 (или пользовательского агента) на безопасность.

например.,

@media only screen and (max-device-width: 480px) { 
    html {
        -webkit-text-size-adjust: none; 
    }
}