h5实现全屏

全屏 API 的基本使用

HTML5 提供了 requestFullscreen API 来实现全屏功能。现代浏览器都支持这一特性，但不同浏览器可能需要添加前缀。

// 触发全屏
function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

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

检测全屏状态

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

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);

function handleFullscreenChange() {
  const isFullscreen = document.fullscreenElement || 
                      document.webkitFullscreenElement || 
                      document.msFullscreenElement;
  console.log(isFullscreen ? '进入全屏' : '退出全屏');
}

全屏样式设置

在全屏状态下，可以通过 CSS 伪类 :fullscreen 为元素添加特殊样式。

#fullscreenElement:-webkit-full-screen {
  background: black;
  color: white;
}

#fullscreenElement:-ms-fullscreen {
  background: black;
  color: white;
}

#fullscreenElement:fullscreen {
  background: black;
  color: white;
}

移动端注意事项

移动设备上全屏行为可能与桌面端不同，部分浏览器可能不支持或有限制。iOS Safari 对全屏 API 的支持有限，Android Chrome 通常表现良好。

兼容性处理

为了确保跨浏览器兼容性，建议使用特性检测并封装成通用函数。

function toggleFullscreen(element) {
  const isFullscreen = document.fullscreenElement || 
                      document.webkitFullscreenElement || 
                      document.msFullscreenElement;

  if (!isFullscreen) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}

用户交互要求

大多数浏览器要求全屏操作必须由用户手势触发，比如点击事件。不能通过异步回调或自动执行的方式调用全屏 API。

<button onclick="toggleFullscreen(document.documentElement)">
  切换全屏
</button>