瀏覽器默認改變字體大小解決方案

前言

　　遇到個小坑，踩了一個多小時，真雞兒難受。

　　是這樣的，在移動端字體大小設置了16px，結果到 iphone5 上顯示的有大有小，很奇怪。開始的時候還以為是P標簽的原因，查了半天文檔...最后才發現是瀏覽器的默認行為。

正文

　　在CSS中有  text-size-adjust  這樣一個屬性，這個屬性允許我們控制將文本溢出算法應用到一些手機設備上。這個屬性還沒有寫進標准，使用時必須加上前綴。如下：

        -webkit-text-size-adjust: ;  
        text-size-adjust: ;  
        -moz-text-size-adjust: ;  

　　因為縮放適配小屏幕而導致文字會變得很小，許多手機瀏覽器會使用文本溢出算法讓文本變大而更易讀。當一個包含文本的元素寬度用了100%，他的文本大小會增加直到達到一個易讀的大小，但是不會修改布局。 text-size-adjust   這個屬性允許開發者去除或者修改這個瀏覽器默認行為，因為當網頁設計已經處理小屏幕的寬度問題時不需要他。

　　語法如下：

/* 文本不會放大 */
text-size-adjust: none;

/* 文本可能會被放大 */
text-size-adjust: auto;

/* 文本會被放大80% */
text-size-adjust: 80%;

/* 全局的值 */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;

 text-size-adjust   屬性的值為 auto ， none ， 百分比。

　　-　none

　　　禁用瀏覽器的文本溢出算法。在老的基於webkit內核的桌面端瀏覽器，這將阻止用戶將網頁放大或縮小。

　　-    auto


　　　啟用 瀏覽器的文本溢出算法。該值用於取消先前使用CSS設置的none。

　　-　<percentage>

　　　啟用 瀏覽器的文本溢出算法，具體用一個百分數來確定文本放大范圍。 

 

我的解決辦法：

   body   {  
        text-size-adjust: 100% !important;  
        -webkit-text-size-adjust: 100% !important;  
        -moz-text-size-adjust: 100% !important;  
    } 
　　//必須加上對應的前綴

需要注意的是這個屬性並未寫進標准，使用時 必須添加上對應的前綴，然后  這個屬性只有在一些智能手機和平板電腦上使用，當然，這種情況多出在小屏幕的手機上，桌面瀏覽器和一些平板電腦瀏覽器並沒有一些溢出算法。 

更詳細的內容請參考 MDN 文檔。