移动端横竖屏的坑

判断横竖屏的原理：

如果屏幕宽度大于高度，则判断为横屏；如果屏幕宽度小于高度，则判断为竖屏。

 

横竖屏的判断方法：

1.使用css media方法：

@media all and (orientation : landscape) { 

    h2{color:red;}/*横屏时字体红色*/

} 

@media all and (orientation : portrait){ 

    h2{color:green;}/*竖屏时字体绿色*/

} 

 

2.使用js判断:

var winW = window.innerWidth,
    winH = window.innerHeight;

if(winW >= winH){
    //横屏
}
else{
    //竖屏
}

 

其实这两种方法的原理是一样的。

 

那么坑在哪里？？？？

如果你的页面有需要用户填写的地方，例如一个输入框或者表单之类的。那么当用户点击输入，系统键盘会弹出来，导致页面高度发生变化。

如果手机不是那种类似于5.5寸的大屏，那么当键盘出现的时候就会变成宽度小于高度，即被误判为是横屏。

 

所以告诫大家，做横竖屏区别判断的时候，需要考虑这么一个坑哦！