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

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

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

03

02

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

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

浏览器默认会根据当前屏幕方向和内容自动调整内容的字体大小,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) 打赏
未经允许不得转载:WEBTian开发 » 禁止横竖屏时内容自动调整

评论 1

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

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

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏