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

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

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

/*

**修復iPhone橫屏后字體變大問題

**//www.capjsj.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也沒有問題，因為上面的四行代碼是判斷瀏覽器寬度后生效的。這一點就見仁見智了，根據大家的實際情況來使用。

除特別注明外，本站所有文章均為成航先森 www.capjsj.cn原創，本文共1287個字

轉載請注明出處來自https://www.capjsj.cn/wyzshjj_iphone_sjhpztbdwt.html

總結

以上是生活随笔為你收集整理的android 横屏字体变小,网页自适应解决iPhone手机横屏字体变大问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。