2

Сайт zemlyconsalt.ru

По непонятной причине шрифт отображается крупнее, чем нужно. Шрифт задан в em. Поворачиваю телефон в горизонтальную ориентацию и возвращаю снова в портретную - шрифт становится нужного размера (уменьшается).

Если сначала покрутить экран и потом переходить по ссылкам сайта, то размер шрифта остается нужного размера (не увеличивается чрезмерно при переходе на другую страницу сайта).
Проблема появляется, если заново перезагрузить страницу. Проблема именно на айфоне (проверял в сафари и хроме). На андроиде в стандартном браузере и в хроме все в порядке.

Подскажите пожалуйста, из-за чего так происходит?


Добавлено

Помог такой вариант: html * { max-height: 1000000px; }

Остались вопросы:

  • Почему при изменении ориентации экрана на ландшафтную шрифт выглядит крупнее, чем при портретной? Становится крупнее пропорционально увеличению ширины.
  • Размер букв ведь должен быть одинаковым вне зависимости от ориентации?
  • Как это исправить и из-за чего такое вообще происходит?

Встречал такое на других сайтах.

2
  • Font boosting?
    – Qwertiy
    Commented 26 сент. 2016 в 14:15
  • спасибо большое! статья помогла :)
    – Nugget
    Commented 27 сент. 2016 в 7:51

2 ответа 2

1

Стили из этого reset.css решают вашу проблему:

// Fix height and scrollbars
body {
    min-height: 100%;
    overflow: auto;
    overflow-x: hidden;

    // Fix hyphenation
    word-wrap: break-word;

    // Fix rendering fonts
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

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

    // Fix tap color
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    // Remove 300ms delay on Mobile Devices
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
0

Попробуйте установить размер шрифта в %.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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