当前位置：首页 > VUE

vue实现横屏

2026-01-19 16:09:55VUE

Vue 实现横屏的方法

方法一：CSS 旋转实现横屏

通过 CSS 的 transform 属性将页面旋转 90 度，实现横屏效果。

/* 在全局样式或组件样式中添加 */
.landscape-mode {
  transform: rotate(90deg);
  transform-origin: left top;
  width: 100vh;
  height: 100vw;
  position: absolute;
  top: 0;
  left: 100vw;
  overflow-x: hidden;
}

在 Vue 组件中动态添加或移除横屏样式：

<template>
  <div :class="{ 'landscape-mode': isLandscape }">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLandscape: false
    };
  },
  methods: {
    toggleLandscape() {
      this.isLandscape = !this.isLandscape;
    }
  }
};
</script>

方法二：监听屏幕方向变化

通过 screen.orientation API 监听设备方向变化，并动态调整布局。

// 在 Vue 组件的 mounted 钩子中
mounted() {
  window.addEventListener('orientationchange', this.handleOrientationChange);
  this.handleOrientationChange();
},
methods: {
  handleOrientationChange() {
    const orientation = screen.orientation.type;
    this.isLandscape = orientation.includes('landscape');
  }
}

方法三：强制横屏显示

通过修改 meta 标签强制横屏显示（适用于移动端）。

<!-- 在 public/index.html 或组件模板中添加 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

结合 JavaScript 强制横屏：

// 在 Vue 组件中
methods: {
  requestFullscreen() {
    if (screen.orientation && screen.orientation.lock) {
      screen.orientation.lock('landscape');
    } else if (window.screen.lockOrientation) {
      window.screen.lockOrientation('landscape');
    }
  }
}

方法四：媒体查询适配横屏

使用 CSS 媒体查询针对横屏设备调整样式。

@media screen and (orientation: landscape) {
  .content {
    width: 100vh;
    height: 100vw;
    transform: rotate(90deg);
    transform-origin: left top;
  }
}