為什么 iOS Chrome 與 iOS Safari 上的字體大小不同？

Question

我在一個響應式網站上工作，在我的 iPhone（iOS 13，2020 年 6 月）上查看它時，我發現 Safari 和 Chrome 之間的字體大小不同。

我嘗試了幾種方法來解釋它，但找不到原因。

我懷疑它與我很久以前的一些 CSS 有關： -webkit-text-size-adjust: 100%; 刪除和更改此值對差異沒有影響，所以這是一個轉移注意力的問題。

是什么導致同一個站點在這兩個應用程序上的呈現與 CSS 不一致？

Answer 1

這里有兩個潛在的原因，肯定還有更多，但這些是我發現並解決了我的問題的原因。

Chrome 遵循系統范圍的“文本大小”

如果您在控制中心使用“文本大小”slider，或者系統級別的相關設置，Chrome 會自動更改站點的文本！

據我所知，Chrome 中沒有設置 iOS 來禁用與Text Size的這種鏈接。

因此，如果您希望 Safari 和 Chrome 匹配，請確保您手機的字體大小state 在中間 position 標記為“默認”。

如果您像我一樣每天使用文本大小控件，或者您的用戶或客戶使用文本大小控件，很高興知道這兩者！

Safari 在“設置”應用中有“頁面縮放”設置

另一方面，Safari 有一個名為Page Zoom的設置，從 50% 變為 300%。 它位於Safari > Settings for Websites > Page Zoom下的Settings應用程序中。

此設置可能會導致 CSS 布局在大小為 200% 時完全混亂。

無論哪種方式，如果兩個應用程序之間存在差異，此頁面縮放設置也值得一試。

Answer 2

感謝您為我指明了正確的方向 - 我一直在解決為什么我的 iPhone SE 上的 Chrome 呈現比 Safari 更大的文本時遇到了可怕的問題！

我似乎沒有文本大小的“默認”設置（設置>顯示和亮度>文本大小）。

但是， -webkit-text-size-adjust: 100%確實對我有用 - 至少對於我正在苦苦掙扎的 Chrome 而言。

Answer 3

在 iOS 13 中，Safari 將媒體字體大小暴露給最終用戶，這意味着在您的根頁面（html 標記）中，css“字體大小不可能”規則被覆蓋，強制用戶更改。

And Chrome for Safari is not using rendering engine "Blink" as for Android, it's using Safari webKit render engine, so, Chrome for iOS is "Safari"

無論如何，您可以對此做出反應，調整您的媒體查詢以使用“em”單位而不是“px”，換句話說：

1. 將引導程序（如果使用）斷點更改為“em”而不是默認像素。
2. 使您的組件邊框、填充和其他基於像素的東西。

另一種方法是了解用戶的需求並在他們需要調整字體大小之前做出反應：

1. 根據視口調整字體大小（css鉗位）
2. 使用響應式布局
3. 使用 css 邊框框，框陰影...

另一種方法是重新計算一切，代價高昂：

如果用戶更改了根的字體大小怎么辦？

Answer 4

我在 iOS14,13 上的段落有一個奇怪的問題，它被放大了，這對我適用於 Safari 和 Chrome：

-webkit-text-size-adjust: none;

我希望它也會對某人有所幫助。