html5页面强制横屏,移动端如何让页面强制横屏

移动设备可以旋转屏幕，但如何做到就算旋转手机页面始终横屏显示呢？首先取得屏幕内可用区域的宽高，然后根据宽高的关系来判断是横屏还是竖屏。如果是竖屏，就把div的宽高设置成横屏的高宽，然后旋转。

好了我的测试页面结构如下：

lol

很简单对不对，最终的理想状态是，把lol非常和谐的横过来。好了来看看区分横屏竖屏的css：

@media screen and (orientation: portrait) {

html{

width : 100% ;

height : 100% ;

background-color: white ;

overflow : hidden;

}

body{

width : 100% ;

height : 100% ;

background-color: red ;

overflow : hidden;

}

#print{

position : absolute ;

background-color: yellow ;

}

}

@media screen and (orientation: landscape) {

html{

width : 100% ;

height : 100% ;

background-color: white ;

}

body{

w