您在全域樣式中使用文字大小調整嗎？-css教學-PHP中文網

您在全域樣式中使用文字大小調整嗎？

王林

發布： 2024-09-11 06:38:02

原創

1230 人瀏覽過

最近，我偶然發現了一個神秘的 CSS 問題，該問題僅出現在真實的行動裝置上，尤其是 iOS Safari。某些字體顯得過大，破壞了版面的完整性。嘗試透過在開發工具中套用不同的字體大小來解決此問題，甚至使用 !important 也沒有效果。您可以在下面看到所需的螢幕顯示和我最終看到的螢幕。

Do you use text-size-adjust in your global styles?

了解正在發生的事情

經過調查，我發現有時行動瀏覽器會動態調整字體大小以增強使用者的可讀性。行動瀏覽器的呈現行為與桌面瀏覽器不同。與通常以裝置螢幕寬度呈現頁面的桌面瀏覽器不同，行動瀏覽器通常會使用更寬的視窗（通常預設為 980 像素），以適應未針對較小螢幕進行最佳化的網站。這必然會導致水平滾動。為了解決這個問題，HTML 中通常採用以下規則，以確保視窗縮放以準確地適應裝置尺寸。

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

登入後複製

但是，在縮小以適應移動螢幕時，某些瀏覽器可能會將文字渲染得太小，從而促使應用文字膨脹演算法來放大文字以提高易讀性。此演算法有時會導致意外的字體放大，特別是當跨越螢幕整個寬度的元素在不改變佈局的情況下經歷文字大小增大時尤其明顯。為了解決此問題並保持跨裝置的文字大小一致，我們可以利用 CSS text-size-adjust 屬性。

文字大小調整使網頁作者能夠停用或調整這種自動文字膨脹行為，這對於考慮小螢幕設計的網站尤其重要（我相信大多數新網站都是如此）。此屬性控制某些智慧型手機和平板電腦上使用的文字膨脹演算法。其他瀏覽器會忽略它。預設大小調整會影響文字和表單控制項，無論這些表單控制項是否包含文字（例如文字輸入、選擇）或不包含文字（例如單選按鈕、核取方塊）。

它有 3 個可能的值：

auto：此值指示渲染器在小型裝置上渲染文字時使用預設大小調整。
none：指示渲染器不要對小型裝置上顯示的文字執行任何大小調整。
百分比[0,無限大]：渲染器不得進行大小調整，而是必須將字體大小的計算值乘以該百分比。使用 100% 相當於不使用。

我解決這個問題的方法

我透過將此屬性添加到正文中作為全局 css 樣式的一部分（也可以添加到 html 中）解決了文字膨脹問題。我建議將此規則添加到您的全域/重置/規範化 css 檔案中：

body {
    // prevent font-size inflation on small devices
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

登入後複製

僅適用於 iOS safari -webkit-text-size-adjust 有效，但我包含了其他供應商和非供應商屬性以添加對其他瀏覽器的支援。在開始時添加非供應商屬性非常重要。如果在末尾添加，在 Safari iOS 中它將覆蓋 -webkit ，並且由於不支援它，因此不會應用它，因此一切將按預設工作。

其他需要記住的注意事項：