如何在Facebook移动端/Messenger即时游戏中获取/设置屏幕分辨率？

这问题我帮好几个开发者排查过，Facebook即时游戏的WebView环境确实有自己的一套分辨率适配逻辑，直接用window.screen.width或者window.innerWidth拿到的数值不准太正常了——下面给你拆解原因和靠谱的解决办法：

为什么会出现360px vs 980px的差异？ #

Facebook移动端（包括Messenger）的WebView容器，即使你没加限制视口的meta标签，也会默认将页面缩放到360px的逻辑宽度，这是他们为了适配不同设备统一体验的策略。Chrome浏览器里的980px是它默认的桌面视口宽度，和Facebook的容器逻辑完全不同，所以数值差异很大。

靠谱的解决方案：用Facebook Instant Games SDK API #

既然是在Facebook的游戏容器里运行，最可靠的方式就是用他们官方提供的SDK来处理分辨率，步骤如下：

1. 先初始化SDK #

所有Facebook Instant Games的API都需要在初始化完成后才能调用，所以先确保你的代码里有初始化逻辑：

FBInstant.initializeAsync()
  .then(() => {
    // 初始化完成后再处理分辨率相关操作
    handleResolution();
  })
  .catch(error => console.error('SDK初始化失败:', error));

2. 获取真实可用的游戏画布尺寸 #

用FBInstant.getCanvasSize()可以直接拿到游戏容器的实际宽高，这个数值是适配当前设备屏幕的真实可用空间，不会被WebView的缩放干扰：

function handleResolution() {
  const { width, height } = FBInstant.getCanvasSize();
  console.log('当前游戏画布实际宽度:', width);
  console.log('当前游戏画布实际高度:', height);
  
  // 这里可以把拿到的尺寸传给你的游戏渲染逻辑
  // 比如设置canvas元素的大小：
  const gameCanvas = document.getElementById('game-canvas');
  gameCanvas.width = width;
  gameCanvas.height = height;
}

3. 主动设置游戏画布尺寸（可选） #

如果需要调整游戏容器的大小来适配你的游戏分辨率，可以用FBInstant.setCanvasSize(width, height)，不过要注意这个方法需要在初始化后调用，而且要考虑设备的横竖屏适配：

// 比如设置游戏为16:9的比例
const targetHeight = width * 9 / 16;
FBInstant.setCanvasSize(width, targetHeight);

备选方案：不用SDK的临时办法 #

如果暂时不想接入SDK，可以尝试用设备像素比来计算物理像素，但这个方法不如SDK可靠，因为还是会受WebView缩放影响：

// 计算物理像素宽度
const physicalWidth = window.screen.width * window.devicePixelRatio;
console.log('物理像素宽度:', physicalWidth);

但还是强烈建议用官方SDK的方法，毕竟这是专门为即时游戏场景设计的。

内容的提问来源于stack exchange，提问作者Yurij Glagolevskij