如何在iPhone浏览器隐藏地址栏，实现Phaser网页游戏全屏适配

安全阿岳

2026-8-13

iOS Safari 适配Phaser游戏全屏的两种解决方案

一、触发自动隐藏地址栏

iOS Safari的地址栏会在页面内容滚动后自动隐藏，你可以通过以下方式触发：

页面加载完成后触发微小滚动：

window.addEventListener('load', () => {
  // 延迟100ms确保页面元素加载完成
  setTimeout(() => window.scrollTo(0, 1), 100);
});

配置viewport meta标签优化行为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">

注：apple-mobile-web-app-capable仅当用户将网页添加到主屏幕后生效，此时会以全屏模式打开，无地址栏和工具栏。

二、计算地址栏高度动态适配画布

iOS没有直接提供地址栏高度的API，但可以通过视口高度差值计算：

编写获取可用视口高度的函数：

function getUsableViewportHeight() {
  // document.documentElement.clientHeight 是当前可用的内容高度（不含地址栏/工具栏）
  return document.documentElement.clientHeight;
}

初始化Phaser时使用该高度：

const gameConfig = {
  type: Phaser.AUTO,
  width: window.innerWidth,
  height: getUsableViewportHeight(),
  scene: YourGameScene,
  scale: {
    mode: Phaser.Scale.NONE, // 禁用自动缩放，手动控制
    parent: 'game-container'
  }
};
const game = new Phaser.Game(gameConfig);

监听窗口resize事件，动态调整画布大小：

window.addEventListener('resize', () => {
  const newWidth = window.innerWidth;
  const newHeight = getUsableViewportHeight();
  game.scale.resize(newWidth, newHeight);
});