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

Question

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

Как это устроено

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

Эта проблема

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

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

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

1. Android (Samsung Galaxy)
2. iOS (iPod, iPhone, Симулятор)

Windows Phone (Internet Explorer) не подвержен (вау!)

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

Answer 1

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

-webkit-text-size-adjust: none;

Answer 2

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

Answer 3

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

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

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