手机端横屏竖屏判断CSS3媒体查询

最近做H5手机端的项目,竖屏显示的非常完美,横屏过来之后 样式简直不忍直视。

于是就查资料怎样禁用旋转屏幕,但得知的结果是转屏是系统层级的,浏览器控制不了,特别是iPhone手机。没有办法只能换个思路了,既然不能控制转屏,那就在横屏的时候控制样式或者提示用户竖屏体验更好了,于是乎就开始用js各种计算,屏幕宽高,各种resize(); 最后整个本来挺流畅的页面卡的不行。。。

这样行不通,仔细想了想,做响应式的时候监测屏幕使用的CSS3 媒体查询(@media),能不能使用媒体查询达到效果那,有时候各种查资料、测试。最终功夫不负有心人,找到了相应的方法:

 

两段CSS就能达到很长一段js的效果,并且效率高,不过友情提醒,PC兼容性不好,慎用~~

版权属于: 三个前端 | 积累知识,分享经验,交流心得
原文地址: http://web3ge.com/archives/76
欢迎转载,请以链接形式注明原始出处及本声明。

1 Comment

发表评论