禁止横竖屏时内容自动调整 – WEB前端开发

刚接触移动端开发，感觉坑比想像的要多，一个一个踩了！

iOS下当竖屏转向横屏的时候，发现内容字体会自动变大，通过各种方法设置字体大小都失败了。如图：

如上图所示，很明显当手机由竖屏转向横屏的时内容中的文字自动变大，跟你自己设置的大小无关。

网上搜索了一下：发现有个text-size-adjust属性，具体文档请查看：

1. http://www.css88.com/archives/5631/https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html
2. http://www.css88.com/archives/5631/https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust?redirectlocale=en-US&redirectslug=CSS%2Ftext-size-adjust
3. http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx

浏览器默认会根据当前屏幕方向和内容自动调整内容的字体大小，css设置如下：

这样就能禁止当手机由竖屏转向横屏的时内容中的文字自动调整大小，各浏览器下的私有属性为-webkit-text-size-adjust，-moz-text-size-adjust，-ms-text-size-adjust。
设置后的效果如下：

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《禁止横竖屏时内容自动调整》