Ответ 1
Я считаю, что вы ищете это в своем CSS:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
В настоящее время я работаю над мобильной версией веб-сайта, все отлично, отлично работает на iPhone, Blackberry и Android.
У меня есть одна небольшая проблема, не большая сделка, но все же немного раздражающая. У меня есть:
<h1>
теги установлены на 18px и жирные
Теги <h2>
установлены на 12px и выделены жирным шрифтом
Теги <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;
}
Я считаю, что вы ищете это в своем CSS:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
Лучшее решение может использовать 100% вместо none, как указано пользователем612626 в более старой версии: Несоответствие размера шрифта на iPhone
body {
-webkit-text-size-adjust: 100%;
}
Таким образом, браузеры webkit для настольных компьютеров могут регулировать размер и масштабирование пропорционально. Я думаю, что это лучший подход, чем фильтрация по размеру экрана.
Надеюсь, что это поможет.
Как указано в ответе Neurofluxation, вы можете использовать правило CSS -webkit-text-size-adjust, но будьте осторожны, что это может помешать пользователям изменять размер шрифта на рабочем столе Webkit (см. в этой статье для более подробной информации).
В свете этого, вероятно, стоит проверить с помощью мультимедийных запросов CSS3 (или пользовательского агента) безопасность.
например.
@media only screen and (max-device-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
}