移動Webkit中的字體大小意外增加

Question

我正在為移動設備優化網站，而我幾乎完成了（是的！），但是有一件事讓我絞盡腦汁：

這個怎么運作

我使用CSS重新設置了標簽欄（實際上是列表）的樣式，使其像下拉菜單一樣工作。 當觸摸唯一可見的列表元素時，jQuery會在ul -element上切換類“ open”，並且所有列表元素也會出現。 就是這樣。

問題

展開下拉菜單時，其字體大小從15px增加到19px。 而且在Inspector中，絕對沒有提示為什么會發生這種情況。 添加諸如font-size: 15px !important;的規則font-size: 15px !important; 沒有效果。

我為您做了一些截屏視頻：http: //youtu.be/MUTJfTK70PE?hd=1

受影響的設備

1. Android（三星Galaxy）
2. iOS（iPod，iPhone，模擬器）

Windows Phone（Internet Explorer） 不受影響 （哇！）

我將非常感謝每個想法！！

Answer 1

您可以嘗試添加以下內容： font-size: 1.5rem;

Answer 2

原來，Mobile Webkits字體大小調整是由來。 這條規則解決了它：

-webkit-text-size-adjust: none;

Answer 3

在html5中，最好通過在頁面標題中顯式設置視口來解決。 該聲明

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

關閉移動字體的大小調整。 將text-size-adjust設置為none的缺點是在移動設備上禁用縮放，仍然需要大量前綴，並且某些瀏覽器似乎不會忽略該值。