網(wǎng)頁自適應(yīng)解決iPhone手機(jī)橫屏字體變大問題

編輯：狂族晨曦 來源：經(jīng)驗(yàn)雜筆 日期：2016-03-31 閱讀： 5,423 次 2 條評論 » 百度已收錄

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

網(wǎng)頁自適應(yīng)解決iPhone手機(jī)橫屏字體變大問題

網(wǎng)上搜索結(jié)果中有很多答案，但是經(jīng)過先森實(shí)踐后，最終覺得有用的是在style.css中添加以下代碼：

/*
**修復(fù)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的文字大小調(diào)整”的意思。

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

在WebKit內(nèi)核的瀏覽器中規(guī)定，當(dāng)在css中定義的中文font-size小于12px的時候,瀏覽器仍然使用12px。字體也會隨著網(wǎng)頁的變大而變大，這也是當(dāng)你手機(jī)橫屏?xí)r，字體變大的原因。而控制這個功能的，就是CSS 中的 -webkit-text-size-adjust。

text-size-adjust 設(shè)為 none 或者 100% 則關(guān)閉字體大小自動調(diào)整功能。

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

先森最初找到的代碼也是設(shè)置的none，但是看了這篇文章后先森將其改為100%。其實(shí)用none也沒有問題，因?yàn)樯厦娴乃男写a是判斷瀏覽器寬度后生效的。這一點(diǎn)就見仁見智了，根據(jù)大家的實(shí)際情況來使用。