Chrome Mobile退出全屏后样式异常及事件未触发问题求助

你碰到的是Chrome移动端全屏API的一个已知兼容性问题——当通过返回键（对应桌面端Esc键）退出全屏时，标准的全屏变更事件（webkitfullscreenchange、mozfullscreenchange等）没有正常触发，导致你的红色边框样式没能及时重置。下面是几个可行的解决方案和绕过方法：

1. 用resize事件兜底监听全屏状态变化 #

移动端浏览器在全屏/退出全屏时，窗口尺寸会发生明显变化，我们可以利用这一点来兜底检测状态：

// 监听窗口尺寸变化
window.addEventListener('resize', () => {
  // 检查当前是否处于全屏状态
  const isFullscreen = !!(document.fullscreenElement || 
    document.webkitFullscreenElement || 
    document.mozFullScreenElement || 
    document.msFullscreenElement);
  
  // 手动切换样式或者触发对应的逻辑
  const imgElement = document.querySelector('#root > .img-wrap > .img-01');
  if (isFullscreen) {
    imgElement.style.border = '2px solid red';
  } else {
    imgElement.style.border = ''; // 重置边框
  }
});

2. 主动拦截安卓返回键事件 #

安卓设备上的返回键可以通过popstate事件来拦截，在退出全屏时手动触发状态更新：

// 监听安卓返回键的popstate事件
window.addEventListener('popstate', () => {
  setTimeout(() => {
    // 延迟检查，确保全屏状态已经更新
    const isFullscreen = !!(document.fullscreenElement || 
      document.webkitFullscreenElement || 
      document.mozFullScreenElement || 
      document.msFullscreenElement);
    const imgElement = document.querySelector('#root > .img-wrap > .img-01');
    imgElement.style.border = isFullscreen ? '2px solid red' : '';
  }, 100);
});

3. 替换CSS选择器，用全局全屏状态类控制样式 #

不要依赖:full-screen伪类，而是通过给根元素添加/移除类来控制样式，这样状态更可控：

首先修改CSS：

#root.fullscreen > .img-wrap > .img-01 {
  border: 2px solid red;
}

然后在进入/退出全屏时手动切换类，同时保留事件监听覆盖正常触发场景：

// 进入全屏的逻辑
function enterFullscreen() {
  const root = document.getElementById('root');
  if (root.requestFullscreen) {
    root.requestFullscreen();
  } else if (root.webkitRequestFullscreen) {
    root.webkitRequestFullscreen();
  } else if (root.mozRequestFullScreen) {
    root.mozRequestFullScreen();
  }
  // 主动添加类
  root.classList.add('fullscreen');
}

// 退出全屏的逻辑
function exitFullscreen() {
  const root = document.getElementById('root');
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  }
  // 主动移除类
  root.classList.remove('fullscreen');
}

// 监听全屏变更事件，覆盖正常触发的情况
['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'].forEach(eventName => {
  document.addEventListener(eventName, () => {
    const root = document.getElementById('root');
    const isFullscreen = !!(document.fullscreenElement || 
      document.webkitFullscreenElement || 
      document.mozFullScreenElement || 
      document.msFullscreenElement);
    root.classList.toggle('fullscreen', isFullscreen);
  });
});

4. 定时轮询检查全屏状态（兜底方案） #

如果上面的方法都不生效，可以用一个低频率的定时器来轮询状态，虽然不够优雅，但能解决极端情况：

setInterval(() => {
  const isFullscreen = !!(document.fullscreenElement || 
    document.webkitFullscreenElement || 
    document.mozFullScreenElement || 
    document.msFullscreenElement);
  const root = document.getElementById('root');
  root.classList.toggle('fullscreen', isFullscreen);
}, 500); // 每500ms检查一次

这个问题本质是Chrome移动端对全屏事件的触发逻辑和桌面端不一致，尤其是通过系统返回键退出时，浏览器没有正确派发事件。上面的方法中，方案3是最推荐的，因为它把样式控制从依赖浏览器伪类转移到了手动管理的类，状态更清晰，也能避开事件不触发的问题。

内容的提问来源于stack exchange，提问作者Herr Mefisto