【移动端适配】vue移动端适配-判断竖屏横屏

Horizon3D

已于 2024-11-15 10:53:21 修改

阅读量2.2k

点赞数 1

分类专栏：项目开发文章标签： vue.js javascript 前端

于 2023-04-24 18:22:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_30907143/article/details/130348876

版权

项目开发专栏收录该内容

6 篇文章

订阅专栏

该文章展示了如何在Vue应用中检测设备的横竖屏状态，并根据屏幕方向显示不同的内容。通过监听`window.orientation`属性变化，动态调整`isScreen`变量来控制是否显示横屏提示。当设备处于竖屏时，显示提示用户旋转以获得更好体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图

1.模板（App.vue中）

<template>
  <div id="app">
    <div
      class="app-hint"
      v-if="isScreen && $store.state.app.device != 'desktop'"
    >
      <div class="rotate">
        <img src="./assets/heng.png" alt="" />
        <h2>请旋转手机，获得更加体验！</h2>
      </div>
      <div class="mask"></div>
    </div>
    <router-view v-else />
  </div>
</template>

2.js

 <script>

export default {

 data() {
    return {
      screenHW: window.orientation, // 判断横竖屏
      isScreen: true, // 横竖屏
    };
  },

 mounted() {
    this.screenHW = window.orientation  //保证刷新时获取状态准确

    // 监听窗口大小
    window.onresize = () => {
      return (() => {
        this.screenHW = window.orientation   // 把横竖屏的变化赋值
      })()
    }
  },
  watch: {
    screenHW: {
      immediate: true,
      handler(newval, old) {
        this.rotate()
      }

    }
  },
  methods: {
   // 判断横竖屏
    rotate() {
      if (this.screenHW == 180 || this.screenHW == 0) {
        // console.log('竖屏')
        this.isScreen = true
      } else if (this.screenHW == 90 || this.screenHW == -90) {
        // console.log('横屏')
        this.isScreen = false
      }
    },

   }
</script>