CSS: отключение автоматического изменения размера шрифта на iPhone

Как объясняется здесь, Apple iPhone (то есть Safari) изменяет размер шрифта при изменении области просмотра (т. Е. С книжного на альбомный или наоборот).

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

-webkit-text-size-Adjust: нет;

(Примечание: в других постах я также видел "100%" вместо "нет", что может быть предпочтительнее, но здесь это различие не имеет значения.)

Соответственно, мой главный вопрос заключается в том, почему, когда я просматриваю следующий тестовый HTML-файл на моем iPhone, шрифт фиксированного размера по-прежнему визуализируется больше в альбомной ориентации по сравнению с книжной ориентацией:

<!doctype html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>Untitled Document</title> 
        <style> 
            p { 
              font-size:24px;
             -webkit-text-size-adjust:none;
             } 
        </style> 
    </head>
    <body> 
        <p>This is an example text</p> 
    </body>     
</html>

Однако я также хотел бы, чтобы он подтвердил, что Apple iPhone - и, возможно, другие устройства Apple - являются ЕДИНСТВЕННЫМИ устройствами, демонстрирующими это (для меня раздражающее) поведение... это правда?

Кстати, я нахожу это раздражающим, потому что я не могу должным образом протестировать на своем iPhone, если мой веб-сайт (т.е. размер шрифта) отображается по-другому на других мобильных устройствах (и я не полностью доверяю онлайн-эмуляторам).

Благодарю.

Источник

1 ответ

Похоже, что это правильное решение... но, по словам Мозиллы, оно все еще экспериментально.

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

/* Text is never inflated */
text-size-adjust: none;

/* Text may be inflated */
text-size-adjust: auto;

/* Text may be inflated in this exact proportion */
text-size-adjust: 80%;

/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;

Вы можете найти больше информации здесь.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

Источник
Другие вопросы по тегам