为何安卓设备上window.innerWidth远大于window.screen.width？

问题重现 #

测试代码 #

var txt = "Screen: " + window.screen.width + " x " + window.screen.height + " px";
txt += "<br/>Window: " + window.innerWidth + " x " + window.innerHeight + " px";

测试结果 #

• 笔记本电脑（正常情况）：

  Screen: 1920 x 1080 px
  Window: 1920 x 929 px
  

• 三星Galaxy S10（Chrome浏览器）：

  Screen: 412 x 869 px
  Window: 980 x 1717 px
  

• 三星Galaxy S10（Firefox浏览器）：

  Screen: 360 x 720 px
  Window: 865 x 1517 px
  

注：该设备实际物理分辨率为3040x1440像素，测试时未缩放窗口。

问题原因 #

1. CSS像素与物理像素的差异：
   window.screen.width/height 返回的是CSS像素下的屏幕尺寸，而非设备物理像素。移动端设备存在设备像素比（devicePixelRatio），即物理像素与CSS像素的比值。三星Galaxy S10的devicePixelRatio约为3，所以物理像素3040x1440对应CSS像素约为1013x480（不同浏览器可能有细微差异）。

2. 浏览器默认布局视口的影响：
   移动端浏览器默认会使用一个较宽的"布局视口"（比如Chrome默认980px）来适配桌面网站，此时window.innerWidth返回的是这个布局视口的宽度，而非浏览器可视区域的CSS像素宽度。这就导致了window.innerWidth大于screen.width的异常情况。

3. 浏览器对screen尺寸的计算差异：
   不同浏览器对screen.width的取值逻辑略有不同，Chrome和Firefox会根据系统设置的显示缩放比例、浏览器自身的适配策略调整CSS像素下的屏幕尺寸，所以出现了不同的数值。

解决方法 #

1. 添加viewport meta标签，强制浏览器使用理想视口 #

在HTML的<head>中添加以下标签，让浏览器使用设备的CSS像素尺寸作为布局视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

添加后，window.innerWidth会返回浏览器可视区域的CSS像素宽度，此时screen.width >= window.innerWidth的逻辑就能成立。

2. 获取设备物理像素 #

如果需要获取真实的物理像素尺寸，可以通过以下方式计算：

// 物理像素宽度
const physicalWidth = window.screen.width * window.devicePixelRatio;
// 物理像素高度
const physicalHeight = window.screen.height * window.devicePixelRatio;

内容的提问来源于stack exchange，提问作者Achim S.