html5—屏幕横竖屏

mui 控制旋转屏幕方向

版权声明：本文为多毛大叔爱萝莉原创，如需转载请注明出处！ https://blog.csdn.net/qq_37121488/article/details/80748823

在用mui做app的时候，要做一个大数据统计需要横屏显示表格。所以去查了下资料。在这里记录一下。

我要做的是，在a页面是竖屏，在a页面点击到子页面。子页面要变成横屏。这种效果。 
在html5+ 的api中有个锁定屏幕方向的方法是 plus.screen.lockOrientation 可以帮助我们解决屏幕旋转问题。

说明

锁定屏幕方向后屏幕只能按锁定的屏幕方向显示，关闭当前页面后仍然有效。 可再次调用此方法修改屏幕锁定方向或调用unlockOrientation()方法恢复到应用的默认值。

参数

参数只有一个。锁定屏幕方向可取以下值： “portrait-primary”: 竖屏正方向； “portrait-secondary”: 竖屏反方向，屏幕正方向按顺时针旋转180°； “landscape-primary”: 横屏正方向，屏幕正方向按顺时针旋转90°； “landscape-secondary”: 横屏方向，屏幕正方向按顺时针旋转270°； “portrait”: 竖屏正方向或反方向，根据设备重力感应器自动调整； “landscape”: 横屏正方向或反方向，根据设备重力感应器自动调整；

项目demo

刚开始进入页面时我的需求是需要旋转成横屏：

setTimeout(function () {
        plus.nativeUI.toast('该页面需要横屏查看'); // 友好的提示一下
        plus.screen.lockOrientation("landscape-primary") // 把屏幕方向改变成横屏正方向
    }, 1000)

• 1
• 2
• 3
• 4

离开页面时也要旋转回原来的样子：

plus.screen.unlockOrientation(); // 取消旋转屏幕
plus.screen.lockOrientation("portrait-primary"); // 或者使用把屏幕改变成竖屏正方向

• 1
• 2

如果要打包成app 需要在manifest.json中点击你让他旋转的位置。如下：

 
点击你需要选择的方位。在打包 上边的效果就可以实现了。

这样就可以实现页面进入旋转屏幕离开屏幕恢复的效果。 
参考api：http://www.html5plus.org/doc/zh_cn/device.html