Safari на iOS (я использую iOS 13, новейшая версия) имеет своего рода автоматическое поведение c изменения размера шрифта, которое, при необходимости, увеличивает шрифты, чтобы сделать их легко читаемыми на iPhone. По сути, это альтернатива адаптивного макета, если ваш макет прост и достаточно гибок, чтобы допускать разные размеры шрифтов.
Многим людям не нравится это поведение, и когда вы его гуглите, вы в основном получают рецепты, как это предотвратить.
Но мне действительно нравится такое поведение, и я хочу использовать его для простого веб-сайта, состоящего в основном из текста.
Проблема в том, что Safari не обрабатывает весь текст таким образом, и (по крайней мере мне) совершенно неясно, от чего зависит это поведение.
Так что, если, например, у вас есть основной текст в 14px и хотите иметь некоторый текст с более крупным размером шрифта (заголовки, что угодно ...), скажем, 18px, может случиться, что Safari увеличит текст на 14px, но не на текст на 18px. В результате текст, который должен быть больше основного текста, на самом деле меньше, что, конечно, разрушает весь макет. Изменение шрифта иногда , кажется, имеет тот же непреднамеренный эффект. Как я уже сказал, кажется, что c совершенно ошибочно, когда Safari делает это, а когда нет. Я борюсь с этим уже более недели, и это почти сводит меня с ума.
Вот простой пример (но, пожалуйста, обратите внимание, что вы увидите проблему, только если разместите ее на веб-сервере и смотреть его в Safari на iOS).
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Size Test</title>
<style>
body {
font-size: 14px;
font-family: serif;
}
.Head {
color: red;
font-family: sans-serif;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua.</p>
<p class="Head">Foo Bar</p>
<!-- <p class="Head">Foo Bar</p> -->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.</p>
</body>
</html>
Как видите, у меня есть класс заголовка, который меняет только тип шрифта (красный цвет только для указания из проблемы). Этого достаточно, чтобы Safari на iOS игнорировал его при увеличении шрифтов; то есть, хотя размер шрифта не должен изменяться, на самом деле строка Foo Bar намного меньше, чем остальная часть текста.
Однако, это меняется, как только вы используете этот класс по крайней мере дважды . Поэтому, если вы раскомментируете вторую строку Foo Bar в примере кода, внезапно обе строки будут отображаться с правильным размером шрифта в Safari на iOS. Конечно, это поведение совершенно бессмысленно. В случае, если мне нужен этот класс только один раз, я не могу использовать его дважды только для того, чтобы Safari отобразил его правильно.
После, казалось бы, бесконечных проб и ошибок, я нашел обходной путь: Safari on iOS всегда будет правильно отображать размер шрифта, если в абзаце есть хотя бы 1 <br> тег и хотя бы 1 символ после него. (Опять же, это не имеет никакого смысла…)
Итак, если вы используете <p class="Head">Foo Bar<br> </p>, а затем установите нижнее поле класса .Head на достаточно большое отрицательное значение, чтобы компенсировать для непреднамеренной второй строки это работает - Safari на iOS всегда будет отображать увеличенный размер шрифта, даже если класс используется только один раз (по крайней мере, в моих тестах).
Но, конечно, это крайне уродливый обходной путь.
Итак, мой вопрос в основном состоит в том, знает ли кто-то менее уродливый обходной путь, который столь же надежен.