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

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

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

/*

**修復(fù)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%}}

其中最重要的代碼這個(gè)屬性：

-webkit-text-size-adjust

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明出處來自https://www.capjsj.cn/wyzshjj_iphone_sjhpztbdwt.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。