uniapp 横屏开发

223 阅读1分钟

2024/08/02

一,进行页面rpx单位的更新

"rpxCalcMaxDeviceWidth": 2560, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960
"rpxCalcBaseDeviceWidth": 1280, // rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375
"rpxCalcIncludeWidth": 2560, // rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx,默认值为 750

二、manifest.json文件修改app-plus的下级加入

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

三,在需要使用横屏切换的页面进行调用(函数内使用上面文件列表增加的字段)

// 页面加载完给自然方向,它就能根据用户横竖自动切换
	onLoad() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('default');
			// #endif
		},
	// 页面关闭时清除横屏正方向
	onUnload() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary');
			// #endif
		},

!!!注意要点,使用rpx单位的屏幕切换会出现异常(即屏幕切换了,rpx单位还未即时更改,uv-ui组件库使用的是rpx单位),建议使用vh,vw rem

奇怪bug,在使用横屏切换的时候会长出屏幕一截(目前通过删除原因css代码实现)原因代码是下述css代码

1723079282073.png

其他

uni.onWindowResize(CALLBACK)可以监听页面尺寸变化

api

uniapp 移动端 两种横竖屏切换方案_uni.previewimage 竖排展示-CSDN博客 uni.onWindowResize(CALLBACK) | uni-app官网 (dcloud.net.cn) uniapp 横屏开发页面配置(仅支持App、H5)_uniapp 设计稿是横屏的基准宽度怎么设置-CSDN博客