H5页面自动适应横竖屏

对于样式：

通过html标签可强制移动端浏览器横屏或竖屏但兼容性较差，目前仅有：

UC强制竖屏：<meta name="screen-orientation" content="portaint">

QQ强制竖屏：<meta name="screen-orientation" content="landscape">

通过HTML标签media识别横屏和竖屏,分别引用不同的css：

竖屏：

<link rel="stylesheet" media="all and (orientation:portrait" href="portrait.css">

竖屏：

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

通过css媒体查询判断横竖屏，并分别指定样式：

@media screen and (orientation: portrait) {

//竖屏  CSS

}

@media screen and (orientation: landscape) {

//横CSS

}

对于事件：

通过onorientationchange事件或resize事件监听手机的横竖屏，分别指定对应的事件。

强制通过页面 禁止app或手机的横竖屏的切换是不现实的，H5只能针对自身页面做适配！！！

可以适应移动设备的横竖屏，但是有的设备还是会有点问题，你可以分别写：

/*竖屏*/

@media all and (orientation : portrait){

body {

background-color: #00ff00

}

}

/*横屏*/

@media all and (orientation : landscape) {

body {

background-color: #ff0000

}

}

1. 通过在html中分别引用横屏和竖屏的样式：

2. CSS中通过媒体查询的方法来判断：

3. JS判断是否为横屏竖屏:

4. JS判断是否为横屏竖屏:

5. 当屏幕旋转的时候友情提示

效果如下：

---