網頁自適應解決iPhone手機橫屏字體變大問題

編輯：狂族晨曦 來源：經驗雜筆 日期：2016-03-31 閱讀： 5,352 次 2 條評論 » 百度已收錄

先森在完成網站自適應的過程中，遇到了很多大大小小的問題，其中一個問題就是橫屏字體變大的問題。這個問題一碰到感覺很麻煩，其實解決方法卻很簡單。

網頁自適應解決iPhone手機橫屏字體變大問題

網上搜索結果中有很多答案，但是經過先森實踐后，最終覺得有用的是在style.css中添加以下代碼：

/*
**修復iPhone橫屏后字體變大問題
**//www.cnidcc.cn/wyzshjj_iphone_sjhpztbdwt.html
*/
@media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:100%}}
@media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:100%}}
@media only screen and (-webkit-min-device-pixel-ratio: 2){body{-webkit-text-size-adjust:100%}}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){body{-webkit-text-size-adjust:100%}}

其中最重要的代碼這個屬性：

-webkit-text-size-adjust

“-webkit-text-size-adjust”是CSS3中的一個屬性。這個屬性，從字面上來看，就是“WebKit的文字大小調整”的意思。

什么是WebKit呢？這是一種開源的瀏覽器引擎，而蘋果的safari瀏覽器用的就是這種內核。其實chrome、Android的也是WebKit內核，但是先森調試的時候用的是iPhone，所以這里就只說iPhone了，而且好像只有iPhone容易遇到這個問題。

在WebKit內核的瀏覽器中規定，當在css中定義的中文font-size小于12px的時候,瀏覽器仍然使用12px。字體也會隨著網頁的變大而變大，這也是當你手機橫屏時，字體變大的原因。而控制這個功能的，就是CSS 中的 -webkit-text-size-adjust。

text-size-adjust 設為 none 或者 100% 則關閉字體大小自動調整功能。

大家可以看出，先森在上面提出的代碼中，用的是100%而不是none，這是為什么呢？先森看了一篇博文，當時沒有收藏，所以現在也不知道是哪看到的了。博主提出，添加none會有問題，所以建議設置為100%。當時博主沒有說是什么問題，我們想想也就明白了。如果設置none的話，隨著網頁變大，你的文字還是不會變化，這就導致用戶體驗不好了。所以也有很多回答建議不要講該屬性設置為全局屬性。

先森最初找到的代碼也是設置的none，但是看了這篇文章后先森將其改為100%。其實用none也沒有問題，因為上面的四行代碼是判斷瀏覽器寬度后生效的。這一點就見仁見智了，根據大家的實際情況來使用。