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

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

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

Теги <h1> имеют размер 18 пикселей, а теги полужирным
<h2> - 12 пикселей, а теги полужирным
<p> - 12 пикселей и нормальный

Теперь все выглядит отлично на 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;
}

iphone mobile html css mobile-safari
person Ryano    schedule 12.08.2010    source источник
comment
возможный дубликат Сохранить размер шрифта HTML когда ориентация iPhone меняется с книжной на альбомную   -  person Blazemonger    schedule 31.05.2012

Ответы (3)


arrow_upward
62
arrow_downward

Я считаю, что вы ищете это в своем CSS:

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
person Barrie Reader    schedule 12.08.2010
comment
Прекрасно работает! Ура, отметим ответ как можно скорее! - person Ryano; 12.08.2010
comment
После нескольких часов игры ты спас мне жизнь! Спасибо @Neurofluxation. - person dvlden; 02.11.2012
comment
Поверьте, когда я узнал об этом - у меня отвисла челюсть, я начал потеть, и мое сердце екнуло ... Но на самом деле все, что я сделал, это крикнул F * CK YEAH - person Barrie Reader; 02.11.2012
comment
Но почему тег span изменяет размер текста при повороте, а тег a - нет ?! - person Dmitry; 24.11.2014
comment
Спасибо чувак ! CSS потрясающий, и вы тоже !! - person Swastik Pareek; 18.03.2015

arrow_upward
17
arrow_downward

Лучшим решением может быть использование 100% вместо none, как указано user612626 в более старом потоке: Шрифт несоответствие размеров при отображении на iPhone

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

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

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

person Cazuma Nii Cavalcanti    schedule 29.08.2012

arrow_upward
14
arrow_downward

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

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

E.g.,

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