网页自适应解决iPhone手机横屏字体变大问题

编辑：狂族晨曦 来源：经验杂笔 日期：2016-03-31 阅读： 4,877 次 2 条评论 » 百度已收录

先森在完成网站自适应的过程中，遇到了很多大大小小的问题，其中一个问题就是横屏字体变大的问题。这个问题一碰到感觉很麻烦，其实解决方法却很简单。

网页自适应解决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也没有问题，因为上面的四行代码是判断浏览器宽度后生效的。这一点就见仁见智了，根据大家的实际情况来使用。