当前位置：首页 > VUE

vue实现手机全屏

2026-02-19 18:27:32VUE

使用 Vue 实现手机全屏功能

监听屏幕方向变化

通过 screen.orientation API 可以检测屏幕方向变化，结合 CSS 媒体查询实现全屏适配。

mounted() {
  window.addEventListener('orientationchange', this.handleOrientationChange)
  this.handleOrientationChange()
},
methods: {
  handleOrientationChange() {
    const orientation = screen.orientation.type
    console.log('当前屏幕方向:', orientation)
  }
}

全屏 API 调用

现代浏览器提供了全屏 API，可以通过以下方式触发：

methods: {
  requestFullscreen() {
    const element = document.documentElement
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
    }
  }
}

退出全屏模式

提供退出全屏的对应方法：

methods: {
  exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  }
}

全屏状态检测

监听全屏状态变化事件：

vue实现手机全屏

mounted() {
  document.addEventListener('fullscreenchange', this.handleFullscreenChange)
  document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange)
  document.addEventListener('msfullscreenchange', this.handleFullscreenChange)
},
methods: {
  handleFullscreenChange() {
    this.isFullscreen = !!(
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.msFullscreenElement
    )
  }
}

CSS 全屏样式

添加全屏模式下的特殊样式：

:fullscreen, ::backdrop {
  background-color: #000;
}

:-webkit-full-screen {
  background-color: #000;
}

:-ms-fullscreen {
  background-color: #000;
}

移动端 meta 配置

在 HTML 头部添加 viewport 配置：

vue实现手机全屏

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">

横屏锁定（iOS 特殊处理）

iOS 设备需要额外处理横屏锁定：

methods: {
  lockOrientation() {
    if (screen.orientation && screen.orientation.lock) {
      screen.orientation.lock('landscape')
    }
  }
}

安全策略处理

某些浏览器需要用户手势触发全屏，需在按钮点击事件中调用：

<button @click="requestFullscreen">进入全屏</button>

兼容性处理

检测浏览器是否支持全屏 API：

computed: {
  isFullscreenSupported() {
    return (
      document.fullscreenEnabled ||
      document.webkitFullscreenEnabled ||
      document.msFullscreenEnabled
    )
  }
}