размер шрифта неожиданно увеличивается в мобильном webkit

Я работаю над оптимизацией веб-сайта для мобильных устройств, и я почти закончил (ура!), но одна вещь заставляет меня ломать голову:

Как это работает

Я использовал CSS для изменения стиля панели вкладок (фактически списка), чтобы она работала как выпадающее меню. При касании единственного видимого элемента списка jQuery переключает класс «открыть» на элементе ul, и также отображаются все элементы списка. Вот как это работает.

Проблема

При развертывании выпадающего меню размер шрифта увеличивается с 15 до 19 пикселей. А в Инспекторе совершенно нет подсказки, почему так происходит. Добавление такого правила, как font-size: 15px !important;, не имеет никакого эффекта.

Я сделал для вас небольшой скринкаст: http://youtu.be/MUTJfTK70PE?hd=1

Затронутые устройства

  1. Андроид (Самсунг Галакси)
  2. iOS (iPod, iPhone, Симулятор)

Windows Phone (Internet Explorer) не затрагивается (вау!)

Буду очень благодарен за каждую идею!!


ios android css webkit mobile-webkit
person Robert    schedule 17.01.2014    source источник
comment
Также забавный момент: размер шрифта увеличивается только в альбомной ориентации.   -  person Robert    schedule 17.01.2014

Ответы (3)


arrow_upward
0
arrow_downward

Вы можете попробовать добавить что-то вроде этого: font-size: 1.5rem;

person user3096206    schedule 17.01.2014
comment
Это не имеет никакого эффекта, это только уменьшает высоту элемента списка :( - person Robert; 17.01.2014
comment
Последняя попытка. Пользователь em вместо rem. Я использую аналогичную навигацию и работает:/ - person user3096206; 17.01.2014
comment
Тоже не повезло. Используете ли вы его также на мобильной странице? В настольных браузерах навигация работает нормально. - person Robert; 17.01.2014
comment
Да, я использую и BlackBerry, и iOS, и все отлично работает. - person user3096206; 17.01.2014

arrow_upward
0
arrow_downward

Оказалось, что причиной было изменение размера шрифта Mobile Webkits. Это правило решило это:

-webkit-text-size-adjust: none;
person Robert    schedule 17.02.2014

arrow_upward
0
arrow_downward

В html5 это лучше всего решается явной установкой области просмотра в заголовке страницы. Заявление

<meta name="viewport" content="width=device-width, initial-scale=1.0">

отключает изменение размера мобильного шрифта. Установка text-size-adjust в none имеет тот недостаток, что отключает масштабирование на мобильных устройствах, по-прежнему требует большого количества префиксов, а значение none, по-видимому, игнорируется некоторыми браузерами.

person Thilo Gross    schedule 03.09.2016