网页自适应解决iPhone苹果的safari浏览器手机横屏字体变大问题

在style.css中添加以下代码：

1. /*   
2. **修复iPhone横屏后字体变大   
3. */     
4. @media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:100%}}    
5. @media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:100%}}    
6. @media only screen and (-webkit-min-device-pixel-ratio: 2){body{-webkit-text-size-adjust:100%}}    
7. @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内核。

在WebKit内核的浏览器中规定，当在css中定义的中文font-size小于12px的时候,浏览器仍然使用12px。字体也会随着网页的变大而变大，这也是当你手机横屏时，字体变大的原因。而控制这个功能的，就是CSS 中的 -webkit-text-size-adjust。

text-size-adjust 设为 none 或者 100% 则关闭字体大小自动调整功能。