CSS 和 Safari 的字體大小怪異

據觀察，iPhone 上的 Safari 會顯示意外的字體大小差異。具體來說，較小字體（例如 13 像素）的文字看起來比較大字體（例如 15 像素）的文字更大。這種令人費解的行為提出了一個問題：是否存在 CSS 相關或其他因素導致 Safari 的字體大小覆蓋？

為了解開這個謎團，有必要了解行動裝置上 Safari 的關鍵面向。作為使用者友善的措施，Mobile Safari 在感知到文字呈現過小的風險時會自動調整文字縮放比例。這是為了增強可讀性，尤其是在較小的 iPhone 螢幕上。為了克服這種自動調整的問題，CSS 屬性可以解決這個問題：-webkit-text-size-adjust.

下面是一個消除iPhone 用戶對字體大小混淆的實際範例：

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

此 CSS 程式碼段針對最大裝置寬度為 480 像素的所有行動裝置（即 iPhone 裝置），並停用 Safari 在

總之，Mobile Safari 的自動文字縮放旨在優化較小螢幕上的可讀性。但是，這可能會導致意外的字體大小行為。透過使用 -webkit-text-size-adjust 屬性，開發人員可以重新控製字體大小並確保在不同裝置（包括 iPhone）上保持一致的文字顯示。