禁止横竖屏时内容自动调整

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

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

03

02

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

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

  1. https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html
  2. 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 : none ;
-moz-text-size-adjust : none ;
-ms-text-size-adjust : none ;
text-size-adjust : none

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

01

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 禁止横竖屏时内容自动调整

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    在浏览器可以正常显示,但在微信窗口还是不行

    王鹏飞3年前 (2015-09-01)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏