vue实现手机全屏

Vue 实现手机全屏的方法

使用 Fullscreen API

现代浏览器提供了 Fullscreen API，可以通过 JavaScript 请求全屏。在 Vue 中，可以通过调用这些 API 实现全屏功能。

// 进入全屏
function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { // Safari
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE11
    element.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { // Safari
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE11
    document.msExitFullscreen();
  }
}

在 Vue 组件中，可以绑定这些方法到按钮或事件上。

监听全屏状态变化

可以通过监听 fullscreenchange 事件来检测全屏状态的变化。

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

使用第三方库

如果需要更简单的实现，可以使用第三方库如 screenfull。

安装：

npm install screenfull

使用：

import screenfull from 'screenfull';

// 进入全屏
screenfull.request(document.documentElement);

// 退出全屏
screenfull.exit();

// 检测全屏状态
screenfull.isFullscreen;

移动端适配

在移动端，全屏行为可能受到浏览器限制。可以通过以下方式优化：

• 使用 meta 标签设置视口：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 通过 CSS 确保元素占满屏幕：

  html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  }

注意事项

• 全屏 API 必须在用户交互（如点击事件）中触发，否则会被浏览器阻止。
• 不同浏览器对全屏 API 的实现可能有差异，需要测试兼容性。
• 移动端某些浏览器可能不支持全屏 API，需考虑备用方案。