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

前言

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

　　是這樣的，在移動端字體大小設置了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 文檔。