Несоответствия отображения размера шрифта на iPhone

Чтобы немного улучшить идею Лукаша, попробуйте использовать следующее правило в вашем CSS:

body {
    -webkit-text-size-adjust: 100%;
}

Использование значения '100%' вместо 'none' позволяет всем остальным браузерам на базе Webkit изменять размер текста при использовании функции масштабирования, при этом сохраняется ваш оригинальный размер шрифта.

Эта проблема возникает только в современных браузерах, таких как Safari и Opera на устройствах iPhone. Решение заключается в следующем:

Добавьте этот стиль с -webkit-text-size-adjust: 100%; или -webkit-text-size-adjust: none; к необходимому классу — это будет работать правильно.

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

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
    -webkit-text-size-adjust: none;
}

или

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
    -webkit-text-size-adjust: 100%;
}

Оба варианта будут работать корректно. Нет необходимости применять стили ко всему тегу body.

Установите font-size: 100% для элемента body, а затем используйте единицы "em" для задания размера шрифта для каждого элемента на вашем сайте.

Это сделает размер шрифта 100% от стандартного размера шрифта, установленного в браузере. Например, в Safari на iPhone стандартный размер шрифта составляет 12px, что соответствует 1em (не забудьте проверить стандартный размер шрифта в вашем браузере локально).

Если вы хотите установить размер шрифта в 10px, просто разделите 10 на 12, то есть используйте "0.83em".

Надеюсь, теперь вам стало понятнее. Также рекомендуем выполнить поиск по запросу "css em unit", чтобы получить лучшее представление о данной теме.