HTML5移動Web開發（八）——避免文本字體大小重置

時間 2019-11-24

標籤 html5 html 移動 web 開發避免文本字體大小重置欄目 HTML5 简体版

原文原文鏈接

適用設備：iOS、Windows Mobile
在一些移動設備上，比方說iPhone,Windows Mobile，當用戶把手機切換到橫屏時，瀏覽器會自動地重置文本字體大小。這可能會對咱們形成困擾，由於咱們但願可以徹底掌控用戶界面的設計和瀏覽器對頁面的渲染結果。html

新建ch02r02.htmlweb

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <script src="modernizr-1.7.min.js"></script>
    <style>
        figure, figcaption, header {
            display:block;
            margin:0 auto;
            text-align:center;
        }
    </style>
  </head>
  <body>
    <header>
      HTML5 Logo
    </header>
        <figure>
            <img src="img/HTML5_Badge_128.png" />
            <figcaption>
                It stands strong and true, resilient and universal as the markup you write. 
                It shines as bright and as bold as the forward-thinking, dedicated web developers you are. 
                It's the standard's standard, a pennant for progress. 
                And it certainly doesn't use tables for layout.
            </figcaption>
        </figure>
    <footer>
    </footer>
  </body>
</html>

在iPhone的豎屏渲染該文件時，一切正常。切換到到橫屏時，該頁面的字體大小會忽然的放大，顯而易見，該頁面的字體大小被重置了，這並非咱們指望的結果。如效果圖：瀏覽器

解決：
在頁面的CSS部分加入：字體

html {
-webkit-text-size-adjust: none;
}spa

做用就是告訴WebKit引擎在渲染該頁面時不要自動調整文本字體大小。這樣再切換到橫屏時，字體大小就不會重置了。設計

可是若是在PC桌面訪問，或者經過其餘的非移動設備的瀏覽器訪問，該你設置會致使頁面的縮放功能會被禁用。爲了防止這種易用性的問題，能夠把text-size-adjust的值變爲100%,因此上面的例子改進爲：code

html {
-webkit-text-size-adjust: 100%;
}htm

除了iPhone以外，其餘的移動設備一樣也有方法設置「text-size-adjust」屬性。
Windows Mobile
Windows Mobile IE中「text-size-adjust」屬性使用了不一樣前綴名，他們本來也打算使用webkit做爲該屬性的前綴，由於這樣能夠和其餘瀏覽器保持一致，從而下降Web開發人員的工做難度，開發人員不須要再去考慮在頁面應該添加哪一些特殊前綴的「text-size-adjust」屬性來控制文本字體大小縮放的問題。更有趣的是，微軟認爲，對於這樣屬性，最經常使用的狀況應該是顯示的設置爲none，不要重置文本字體大小。對象

微軟認爲最好的方式是隻實現以ms爲前綴的版本而不是webkit版本。因此對前面的例子這樣改更完整：blog

html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

另外，咱們能夠在例子中添加一行沒有前綴的「text-size-adjust」屬性，以便更好的應對將來變化：

html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}

px,em,誰更好？
在Web開發領域，關於應該使用px(像素)仍是em(相對長度單位，相對於當前對象內文本的字體尺寸)的爭論不絕於耳，可是，這個問題在移動互聯網開發領域，爭論並無那麼激烈，Yahoo!的用戶接口本來使用的單位是em，他們這麼作的緣由是IE6不支持px級別的縮放。可是，這在移動互聯網開發領域並非問題，及時在PC的瀏覽器上，也不用太過在乎這個問題，由於使用IE6 的用戶已經愈來愈少了。所以，在大部分場景下，你均可以使用像素設置字體大小，拋開使用em遇到的各類問題和那些煩人的計算。