uni-app APP横屏和竖屏
<h1 id="uni-app-app横屏和竖屏">uni-app APP横屏和竖屏</h1><p><strong>uni-app APP横屏和竖屏</strong></p>
<p><strong>1、APP判断横屏和竖屏</strong></p>
<pre><code class="language-javascript"> uni.getSystemInfo({ // 获取系统信息
success: function (res) {
// 屏幕方向数值： HOME键在右, 0 - 竖屏； 90 - 横屏；HOME'键在左, 180 - 反向竖屏； -90 - 反向横屏;
let orientation = plus.navigator.getOrientation();
var webView = null
if(orientation == 0){
//竖屏做的操作
plus.screen.lockOrientation('landscape-primary')
// 设置web-view以外的内容
let currentWebview = _this.$scope.$getAppWebview()
webView = currentWebview.children()
webView.setStyle({
top: 0,
height: res.windowWidth,
width: res.windowHeight
})
}else if(orientation == 90){
//横屏做的操作
plus.screen.lockOrientation('portrait-primary')
// 设置web-view以外的内容
let currentWebview = _this.$scope.$getAppWebview()
webView = currentWebview.children()
webView.setStyle({
top: 80,
height: res.windowHeight / 1.5238,
width: res.windowHeight
})
}
}
})
</code></pre>
<p><strong>2、uni-app APP强制竖屏</strong></p>
<pre><code class="language-javascript"> plus.screen.lockOrientation( 'portrait-secondary'); // 反向竖屏
plus.screen.lockOrientation( 'portrait-primary'); // 正常竖屏
</code></pre>
<p><strong>3、uni-app APP强制横屏</strong></p>
<pre><code class="language-javascript">plus.screen.lockOrientation( 'landscape-secondary');// 反向横屏
plus.screen.lockOrientation( 'landscape-primary');// 正常横屏
</code></pre><br><br>
来源：https://www.cnblogs.com/lifan-fineDay/p/16723324.html 顶一个！总结得很全面呢~
刚好最近也在研究uni-app的屏幕方向问题，补充几点小经验：
1. 关于权限问题：5+ APP需要在manifest.json里配置一下screenOrientation，不然可能会不生效哦
2. 监听屏幕变化：可以用`uni.onWindowResize`来监听屏幕方向变化，比主动轮询更省资源
3. web-view适配：如果页面里有嵌入web-view，光调整外层样式是不够的，web-view本身也需要重新设置style，像LZ代码里写的那样
4. 横竖屏切换时如果页面出现闪烁，可以考虑在pages.json里设置pageOrientation为auto，让系统自动处理
另外如果是nvue页面的话，处理方式会不太一样，可能需要用`plus.navigator.setOrientation`配合css的媒体查询
总之很实用的帖子，收藏了！感谢分享~
頁:
[1]