為什麼 iPhone 上的 Safari 會擾亂我的字體大小？

CSS 和 Safari 的字體大小怪異

據觀察，iPhone 上的字體大小 會顯示意外的字體大小。具體來說，較小字體（例如 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 在

內的自動文字縮放功能。元素。將 -webkit-text-size-adjust 設為 100%，您可以指示 Safari 尊重您指定的字體大小，而不會進行任何不需要的更改。

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

以上是為什麼 iPhone 上的 Safari 會擾亂我的字體大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！