具體思路如下：

1、監聽瀏覽器屏幕變化，通過監聽屏幕寬高，辨別出是橫屏，還是豎屏狀態

在項目的起始根頁面進行監聽，我就是在App.vue文件下進行監聽

代碼如下：

<template><RouterView />
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'const isMobile = () => {//判斷是否為移動端設備return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}
const reloadFn = () => {// 阻止菜單默認事件，項目不需要就刪除這段代碼document.oncontextmenu = function (e) {e.preventDefault()}/** 切換橫豎屏時重載頁面* @rule1 橫屏切豎屏* @rule2 豎屏切橫屏*/window.addEventListener('resize', () => {let screenWidth = window.innerWidth || document.documentElement.clientWidthlet screenHeight = window.innerHeight || document.documentElement.clientHeightconst rule1 = screenWidth < screenHeight //手機豎屏const rule2 = screenWidth > screenHeight //手機橫屏const isMobileX = isMobile() //判斷是否為移動端設備if (rule1 && isMobileX) {//手機豎屏// window.location.reload() //重新刷新瀏覽器，根據項目需求，是否需要刷新整個頁面console.log('手機豎屏的寬度', screenWidth)console.log('手機豎屏的高度', screenHeight)} else {//手機橫屏// window.location.reload() //重新刷新瀏覽器，根據項目需求，是否需要刷新整個頁面console.log('手機橫屏的寬度', screenWidth)console.log('手機橫屏的高度', screenHeight)}})
}
onMounted(() => {reloadFn()
})
</script><style scoped></style>

2、把可以區分橫屏還是豎屏的字段參數（自定義名字），存儲進去vuex /? pinia,方便后續統一更改每個頁面適配樣式

在pinia 文件的寫法如下：

import { defineStore } from 'pinia'
// 屏幕橫豎屏適配
export const useStoreScreen = defineStore('screen', {state: () => {return {styleType: 1, // 1手機 2橫屏styleTypeClass: '', //  g-mobile豎屏 g-pc橫屏scroll: true, // 是否允許滾動indexMaxWidth: '1024', // pc端首頁最大寬度(px)maxWidth: '1024' // pc端最大寬度(px)}},getters: {},actions: {changeClass(val: any) {// console.log('styleTypeClass-->', val)this.styleTypeClass = val},changeStyleType(val: any) {this.styleType = val}}
})

3、在App.vue的全局監聽添加 pinia 參數字段

代碼如下：

<template><RouterView />
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'
// import { storeToRefs } from 'pinia'
import { useStoreScreen } from '@/stores/screen'
const storeScreen = useStoreScreen()
// let { styleTypeClass } = storeToRefs(storeScreen)
const isMobile = () => {//判斷是否為移動端設備return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}
const reloadFn = () => {// 阻止菜單默認事件，項目不需要就刪除這段代碼document.oncontextmenu = function (e) {e.preventDefault()}/** 切換橫豎屏時重載頁面* @rule1 橫屏切豎屏* @rule2 豎屏切橫屏*/window.addEventListener('resize', () => {let screenWidth = window.innerWidth || document.documentElement.clientWidthlet screenHeight = window.innerHeight || document.documentElement.clientHeightconst rule1 = screenWidth < screenHeight //手機豎屏const rule2 = screenWidth > screenHeight //手機橫屏const isMobileX = isMobile() 判斷是否為移動端設備if (rule1 && isMobileX) {//手機豎屏// window.location.reload() //重新刷新瀏覽器，根據項目需求，是否需要刷新整個頁面storeScreen.changeClass('g-mobile') //設置公共參數，存進pinia,設置豎屏 css （class的自定義名字）console.log('手機豎屏的寬度', screenWidth)console.log('手機豎屏的高度', screenHeight)} else {//手機橫屏// window.location.reload() //重新刷新瀏覽器，根據項目需求，是否需要刷新整個頁面storeScreen.changeClass('g-pc') //設置公共參數，存進pinia,設置豎屏 css （class的自定義名字）console.log('手機橫屏的寬度', screenWidth)console.log('手機橫屏的高度', screenHeight)}})
}
onMounted(() => {reloadFn()
})
</script><style scoped></style>

4、每個頁面做好屏幕，橫、豎屏兩套樣式，監聽橫屏還是豎屏的字段參數，展示出對應的橫屏還是豎屏class樣式

主要代碼如下：

<script lang="ts" setup>
import { ref, onMounted, nextTick, onBeforeUnmount, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useStoreScreen } from '@/stores/screen'
const storeScreen = useStoreScreen()
let { styleTypeClass } = storeToRefs(storeScreen)
const renewUp = ref(styleTypeClass.value || 'g-mobile') // g-mobile豎屏 g-pc橫屏
watch(//監控數據變化() => styleTypeClass.value,(newVal: any, oldVal) => {renewUp.value = newVal // g-mobile豎屏 g-pc橫屏}
)
</script>