1

Есть 5 блоков, 3 из них скрыто, если нажать кнопку развернуть, то в итоге в Safari на iOS местами шрифты увеличиваются.

Пробовала max-height: 999999px;, но для iOS не помогает.

На Windows Phone все отлично работает, так как надо. Если начинаешь уменьшать шрифты для мобильной версии, то на других ОС они становятся ещё меньше.

2 ответа 2

5

Mobile Safari (а также Chrome для Android, Mobile Firefox и IE Mobile) автоматически увеличивают размер шрифта внутри широких блоков.

Это можно пофиксить одной строчкой CSS:

-webkit-text-size-adjust: 100%;

Минус этого решения:
Двойной тап по блоку больше не будет увеличивать его масштаб в рамках ширины экрана.

Если размер шрифта покажется пользователю слишком мелким, то ему придется увеличивать масштаб всей страницы и использовать свайп влево-вправо, чтобы читать текст.

Лучшее решение — это использовать @media запросы и в зависимости от ширины экрана менять размер шрифта.

Полезно будет почитать вот этот вопрос на stackoverflow:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?

1
  • 1
    Большое спасибо, помогло
    – kira
    11 дек 2014 в 14:51
0

Проблема присутствует не только в Safari. Лучше всего будет использовать вот такую комбинацию из godlike.css:

// Fix text zoom on Mobile Devices
body {
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.