Пожалуйста, помогите мне понять изменение размера текста в Safari.

Mobile Safari по умолчанию изменяет размер текста, включая элементы <h1> и <h2>. Я искал SO, чтобы увидеть, как я мог бы предотвратить это, и нашел такие вопросы, как эти:

Обратите внимание, что ответ на все это свойство CSS:

-webkit-text-size-adjust:none;

Это отлично работает для поддержания относительного размера текста между элементами заголовка и абзаца на мобильном Safari. Тем не менее, я наткнулся на сообщение в блоге, которое теперь называется Остерегайтесь -webkit-text-size-adjust-none::

Что это значит, так это то, что браузеры на основе WebKit не изменяют размер текста. Даже полное масштабирование страницы не изменяет размер текста. Теперь, как может помешать пользователям изменять размер текста, это хорошая идея?

В соответствии с Apples Ссылка на CSS Safari (требуется JavaScript), -webkit-text-size-adjust "Определяет настройку размера для отображения текста содержимое в Safari на iOS".

При задании значения "none" в документации указано, что "размер текста не настроен".

Теперь я использовал описание свойства для обозначения того, что относительный размер текста не будет автоматически скорректирован, а не то, что размер текста не может быть отрегулирован пользователем, но автор говорит, что его тестирование показывает, что текст действительно не может быть настраивается в браузерах на основе WebKit, когда указано значение "none".

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

Итак, мой вопрос заключается в следующем: как можно получить контроль над относительным размером текста между заголовками и абзацами в мобильном Safari, не жертвуя доступностью?

Ответ 1

Ключевая проблема здесь, насколько я понимаю, заключается в том, когда это правило применяется самостоятельно - поскольку , когда значение равно "none" , оно применяется к любому браузеру веб-браузера, будь то рабочий стол, телефон или таблетки. В браузерах webkit для рабочего стола не применяются никакие другие значения, насколько я могу судить (-webkit-font-size-adjust: 150%, ничего не делает).

Когда "none" применяется к Mobile Safari на iOS или в любом мобильном браузере Webkit (Android и т.д.), вы получаете то, что кажется "правильным": браузер не пытается настроить размер шрифта некоторые из ваших элементов, и вы (разработчик) по-прежнему контролируете свои размеры относительно друг друга. Вы можете пощекотать/увеличить масштаб и дважды коснитесь зум, чтобы увеличить/уменьшить масштаб окна просмотра. Мобильные браузеры делают масштабирование в режиме просмотра, а не масштабирование текста.

Однако, когда это правило применяется к webkit рабочего стола (Safari, Chrome), оно кажется неправильным, потому что webkit для рабочего стола делает текстовое масштабирование, и это правило предотвращает это.

Итак, решение предназначено для таргетинга только мобильного webkit для этого правила. Для этого нужен логический ответ на мультимедийные запросы CSS, но управление таргетингом на все устройства iOS немного неудобно и неточно:

@media screen and (max-device-width: 480px), 
       screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (device-width: 768px) {
  body {
    -webkit-text-size-adjust:none;
  }
}

Это должно обеспечить вам все iPhone до 3GS (1-е правило), iPhone 4 (второе правило) и iPad (3-е правило). Третье правило должно теоретически совпадать с настольным Safari, когда область просмотра имеет ровно 768 пикселей в ширину - но на практике это не выглядит.

Честно говоря, я не уверен, что было бы не лучше использовать javascript для обнаружения мобильного Safari и добавить класс в тело документа для применения правила. Таким образом, вам не нужно будет устанавливать новые правила, когда появятся устройства с новыми дисплеями.

Ответ 2

Пожалуйста, остановитесь, чтобы подумать, почему Mobile Safari может изменить размер вашего текста. Мобильное Safari (например, Chrome для Android, Mobile Firefox и IE Mobile) увеличивает размер шрифта в широких блоках, так что если вы дважды нажмите, чтобы увеличить масштаб этого блока (который соответствует блоку ширины экрана), текст будет разборчивый. Если вы установите -webkit-text-size-adjust: 100% (или none), он не сможет это сделать, и поэтому, когда пользователь дважды нажимает для увеличения на больших блоках, текст будет нечетко малым; пользователи смогут прочитать его, если они увеличит масштаб изображения, но тогда текст будет шире, чем экран, и им придется панорамировать по горизонтали, чтобы читать каждую строку текста!

Я перечислил возможные способы работы с этим в более раннем ответе.

Ответ 3

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

Вот исправленная версия:

@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2), screen and (device-width: 768px) {
    body {-webkit-text-size-adjust:none;}
}