Android端Chrome调用webkitRequestFullscreen()致视口/页面尺寸异常问题

我之前在做VR相关的Web应用时也遇到过一模一样的问题——直接对document.body调用全屏API后，Chrome会偷偷调整渲染分辨率，导致画布画质骤降，完全没法满足VR的高分辨率需求。下面是我摸索出来的几个有效解决方案：

1. 别用body做全屏容器，用独立的专属元素 #

Chrome对document.body的全屏处理有一套默认的适配逻辑，比如自动缩放页面来兼容不同设备，这就是画质下降的根源。我们可以创建一个完全由自己控制的全屏容器，避开这套逻辑：

// 先创建一个全屏容器
const fullscreenWrapper = document.createElement('div');
// 让容器完全覆盖屏幕，没有任何边距或滚动
fullscreenWrapper.style.cssText = `
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000; /* 背景设为黑色，适配VR场景 */
`;

// 把你的VR画布挂载到这个容器里
fullscreenWrapper.appendChild(yourVRCanvasElement);
document.body.appendChild(fullscreenWrapper);

// 请求全屏时，记得加上navigationUI参数隐藏导航栏
fullscreenWrapper.webkitRequestFullscreen({ navigationUI: 'hide' });

用这个专属容器代替body后，浏览器就不会乱搞缩放了，渲染区域完全由我们说了算。

2. 强制画布使用设备原生分辨率 #

VR画布的画质核心是匹配设备的物理像素，而不是CSS像素。我们可以通过window.devicePixelRatio获取设备的像素比，然后手动设置画布的真实尺寸：

const dpr = window.devicePixelRatio || 1;
// 设置画布的真实像素尺寸
yourVRCanvasElement.width = window.innerWidth * dpr;
yourVRCanvasElement.height = window.innerHeight * dpr;
// 同时用CSS让画布占满容器
yourVRCanvasElement.style.width = '100%';
yourVRCanvasElement.style.height = '100%';

这样设置后，画布会以设备能支持的最高分辨率渲染，不会因为缩放丢失细节。

3. 监听全屏状态变化，动态调整画布 #

进入或退出全屏时，屏幕的可用尺寸可能会发生变化（比如导航栏隐藏/显示），我们需要及时更新画布尺寸：

document.addEventListener('webkitfullscreenchange', () => {
  if (document.webkitFullscreenElement) {
    // 进入全屏状态，重新计算画布尺寸
    const dpr = window.devicePixelRatio || 1;
    yourVRCanvasElement.width = window.innerWidth * dpr;
    yourVRCanvasElement.height = window.innerHeight * dpr;
  } else {
    // 退出全屏，恢复画布原来的尺寸（根据你的应用逻辑调整）
    yourVRCanvasElement.width = 800;
    yourVRCanvasElement.height = 600;
  }
});

4. 禁用浏览器的自动缩放 #

最后在HTML头部加上这个meta标签，彻底阻止Chrome对页面的自动缩放行为：

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

这一步能确保页面始终以1:1的比例渲染，不会因为浏览器的适配逻辑影响画质。

这些方法组合起来，就能让你的VR画布在Android Chrome全屏模式下保持最高分辨率了，亲测有效！

内容的提问来源于stack exchange，提问作者Joe Iddon