未设置viewport时移动端clientWidth与innerWidth差异原因咨询

问题背景 #

当未设置<meta name="viewport" content="width=device-width">元标签时，移动端浏览器的视口属性出现数值差异：

alert(document.documentElement.clientWidth); // 360
alert(document.documentElement.clientHeight); // 1932

完整测试数据 #

• 设置viewport时：

document.documentElement.clientWidth: 360
document.documentElement.clientHeight: 710
window.innerWidth: 360
window.innerHeight: 710

• 未设置viewport时：

document.documentElement.clientWidth: 360
document.documentElement.clientHeight: 1932
window.innerWidth: 980
window.innerHeight: 1933

原本以为document.documentElement.clientWidth/Height用于获取不含滚动条的视口尺寸，window.innerWidth/Height用于获取含滚动条的视口尺寸，但未设置viewport时两者数值差异明显，因此产生疑问。

原因解析 #

这是移动端浏览器「布局视口」和「视觉视口」的差异导致的，而且你之前的认知仅适用于桌面端，移动端的逻辑有所不同：

1. 未设置viewport的默认行为
   移动端浏览器默认会把页面当作桌面网站渲染，创建一个宽度为980px的「布局视口」（多数浏览器的默认值），随后自动缩放页面，让这个980px的布局视口完整适配到手机屏幕的「视觉视口」（即手机屏幕实际宽度360px）中。

2. 两个属性的实际含义

• window.innerWidth/innerHeight：此时返回的是布局视口的尺寸，也就是浏览器默认的980px，未设置viewport时，浏览器按桌面端逻辑返回该值。
• document.documentElement.clientWidth/clientHeight：返回的是视觉视口的尺寸，即当前屏幕实际可视的页面区域宽度360px，该属性取根元素（<html>）的可视区域宽度，当页面被缩放到适配屏幕时，它就等于屏幕实际宽度。

3. 设置viewport后的变化
   添加<meta name="viewport" content="width=device-width">后，布局视口的宽度被强制设置为与视觉视口一致（即手机屏幕实际宽度360px），此时布局视口与视觉视口重合，因此两个属性的数值完全一致。

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