uni-app应用设置 可以根据手机屏幕旋转进行 (横/竖) 屏切换

首先 我们打开项目的 manifest.json 在左侧导航栏中找到 源码视图

然后找到 app-plus 配置 在下面加上

javascript 复制代码
"orientation": [
	//竖屏正方向
	"portrait-primary",
	//竖屏反方向
	"portrait-secondary",
	//横屏正方向
	"landscape-primary",
	//横屏反方向
	"landscape-secondary",
	//自然方向
	"default"
],

然后 在需要实现旋转屏幕的页面中加上代码

javascript 复制代码
onLoad() {
// #ifdef APP-PLUS
	plus.screen.lockOrientation('default');
	// #endif
},
   // 页面关闭时清除横屏正方向
   onUnload() {
	// #ifdef APP-PLUS
	plus.screen.lockOrientation('portrait-primary');
	// #endif
},

然后 我们真机调试 默认状态下还是竖屏的

但是 我们旋转屏幕 将手机横过来 神奇的一幕就出现了

然后 我们可以通过

javascript 复制代码
uni.getSystemInfo({
	success: function(res) {
		if (res.windowWidth > res.windowHeight) {
			// 横屏
		} else {
			// 竖屏
		}
	}
})

来判断当前在什么情况下

简单说 高度多就是竖屏 宽度多 就是横屏

相关推荐
梦梦代码精11 小时前
基于UniApp+Vue3+ThinkPHP 8,这套知识付费系统的架构设计有点东西
java·低代码·docker·uni-app·开源·php
风月说与山鬼15 小时前
三、uni-app页面配置(pages.json)
前端·uni-app
风月说与山鬼20 小时前
二、uni-app入口文件(main.js)
javascript·uni-app
xiaopang2 天前
一次小程序 Canvas 海报真机调试复盘:从空白导出到 iOS 保存失败
uni-app
MrFlySand_飞沙2 天前
uniapp开发微信小程序实现接入企业微信客服
微信小程序·小程序·uni-app·企业微信
PedroQue993 天前
Vue Router 4.x风格导航守卫全面升级
前端·uni-app
Haibakeji3 天前
APP小程序定制开发项目频繁延期?前期规避方法与落地避坑指南
小程序·uni-app·软件需求
anyup3 天前
迁移uni-app x,我是如何让 AI 把我一步步搞崩溃的...
前端·uni-app·trae
2501_916007473 天前
申请 iOS 推送证书并配置 APNs 群发推送教程
android·ios·小程序·https·uni-app·iphone·webview
博客zhu虎康3 天前
uni-app云打包显示编译成功,但是一直没有进入打包队列,后面也一直没反应
uni-app