Uniapp页面横屏设置

vue2

	onLoad() {
			setTimeout(() => {
				plus.screen.unlockOrientation();
				plus.screen.lockOrientation('landscape-primary');

			}, 500)
		},
		onUnload() {
			plus.screen.lockOrientation('portrait-primary');
		},

vue3

<script setup>
	import {
		onMounted
	} from 'vue';

	onMounted(() => {
		setTimeout(() => {
			plus.screen.unlockOrientation();
			plus.screen.lockOrientation('landscape-primary');

		}, 600)
	});
</script>

如果想整个应用横屏的话在`App.vue 设置

监听横竖屏切换

<script setup>
	import {onResize} from '@dcloudio/uni-app'
	onResize(()=>{
    console.log('横竖屏切换')
	})
</script>

横屏状态下,获取屏幕宽高

<template>
  <view class="content" :style="contentStyle">
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const contentStyle = ref({});
const isLandscape = ref(false);

onMounted(() => {
  uni.getSystemInfo({
    success: function(res) {
      const { windowWidth, windowHeight } = res;
      contentStyle.value = {
        width: `${windowWidth}px`,
        height: `${windowHeight}px`,
      };
    }
  });
});
</script>

<style>
	.content{
		background-color: red;
	}
</style>