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

Question

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

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

Предотвращение масштабирования iPhone при повороте

изменение размера шрифта после изменения ориентации экрана на горизонтальное

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

-webkit-text-size-adjust:none;

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

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

Согласно Apple Safari CSS Reference (требуется JavaScript) , -webkit-text-size-Adjust "Указывает настройку размера для отображения текстового содержимого в Safari на iOS".

Если задано значение «none», в документации указывается, что «Размер текста не настроен».

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

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

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

Answer 1

Ключевой вопрос здесь, насколько я понимаю, заключается в том, когда это правило применяется само по себе - потому что , когда значение равно «none» , оно применимо к любому браузеру WebKit, будь то рабочий стол, телефон размер или планшет. Насколько я могу судить, браузеры настольных веб-наборов не применяют никаких других значений (-webkit-font-size-Adjust: 150%; ничего не делает).

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

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

Итак, решение состоит в том, чтобы настроить таргетинг только на мобильный веб-набор для этого правила. Медиа-запросы 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 (первое правило), iPhone 4 (второе правило) и iPad (третье правило). Третье правило должно теоретически соответствовать настольному Safari, когда область просмотра имеет ширину ровно 768 пикселей, но на практике это не так.

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

Answer 2

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

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

Answer 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;}
}