Android端requestFullscreen后首次触摸元素高度异常缩小问题求助

针对你遇到的Canvas全屏后首次触摸高度骤缩（与虚拟导航栏相关）导致元素偏移的问题，以下是几个实用的解决方案：

1. 请求全屏时强制隐藏导航栏 #

使用全屏API的navigationUI参数，在进入全屏阶段直接隐藏系统导航栏，避免触摸触发后续尺寸变化：

const canvas = document.querySelector('canvas');
canvas.requestFullscreen({
  navigationUI: 'hide'
}).then(() => {
  // 同步更新Three.js渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);
});

这个参数会让系统在全屏启动时就隐藏导航栏，而非等待用户触摸触发，从根源上消除尺寸突变的触发条件。

2. 监听首次触摸事件主动调整尺寸 #

既然只有首次触摸才会触发偏移，我们可以监听第一次触摸动作，主动更新Canvas和渲染器尺寸，提前抵消偏移：

const canvas = document.querySelector('canvas');
let isFirstTouch = true;

// 全屏状态变化时先初始化尺寸
document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement === canvas) {
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
});

// 监听首次触摸，强制同步尺寸
canvas.addEventListener('touchstart', () => {
  if (isFirstTouch) {
    isFirstTouch = false;
    const updatedHeight = window.innerHeight;
    canvas.style.height = `${updatedHeight}px`;
    renderer.setSize(window.innerWidth, updatedHeight);
    // 手动触发resize事件，确保Three.js场景适配
    window.dispatchEvent(new Event('resize'));
  }
}, { once: true }); // 只执行一次

3. 预计算全屏尺寸并强制设置 #

利用screen.availHeight获取屏幕可用高度（已扣除状态栏），在进入全屏时直接设置Canvas尺寸，提前匹配导航栏隐藏后的状态：

const canvas = document.querySelector('canvas');
canvas.requestFullscreen().then(() => {
  const targetHeight = screen.availHeight;
  canvas.style.height = `${targetHeight}px`;
  renderer.setSize(window.innerWidth, targetHeight);
});

这种方式跳过了系统自动调整的过程，让Canvas从一开始就处于最终的全屏尺寸。

4. 阻止首次触摸的默认行为（谨慎使用） #

如果上述方法无效，可以尝试阻止首次触摸的默认动作，避免系统触发导航栏隐藏逻辑，同时手动设置目标尺寸：

const canvas = document.querySelector('canvas');
let isFirstTouch = true;

canvas.addEventListener('touchstart', (e) => {
  if (isFirstTouch && document.fullscreenElement) {
    e.preventDefault();
    isFirstTouch = false;
    const fullHeight = window.screen.height - window.screen.availTop;
    canvas.style.height = `${fullHeight}px`;
    renderer.setSize(window.innerWidth, fullHeight);
  }
}, { once: true });

注意：这个方法可能会影响其他触摸交互（比如Three.js的触摸控制），需要根据场景测试后使用。

内容的提问来源于stack exchange，提问作者Roman Diviš