为何Window.innerWidth缩放时数值变化？MDN文档存矛盾

文档中的相关表述 #

布局视口的定义 #

window.innerHeight 和 window.innerWidth 所覆盖的区域通常被视为布局视口。
（原文：The area within the innerHeight and innerWidth is generally considered the layout viewport.）

布局视口的特性 #

当用户捏合缩放页面、弹出动态键盘，或是原本隐藏的地址栏显示出来时，视觉视口会缩小，但布局视口保持不变。
（原文：When the user pinch-zooms the page, pops open a dynamic keyboard, or when a previously hidden address bar becomes visible, the visual viewport shrinks but the layout viewport is unchanged.）

矛盾示例 #

视口最初为 1200 x 800（window.innerWidth × window.innerHeight）像素。放大后，视口变为 800 x 533 像素，这就是布局视口。
（原文：The viewport was originally 1200 x 800 (window.innerWidth; x window.innerHeight) pixels. Upon zooming in, the viewport became 800 x 533 pixels. This is the layout viewport.）

矛盾点解析 #

这里的核心问题是MDN文档出现了术语与API的混淆：

• 实际上，window.innerWidth/innerHeight 对应的是视觉视口的尺寸，缩放时这个值会随缩放比例变化——放大页面时，视觉视口的像素尺寸会变小，这和示例里的数值变化对应。
• 布局视口的尺寸不会随缩放改变，它的正确获取方式是 document.documentElement.clientWidth/clientHeight，而非window.innerWidth/innerHeight。

示例里错误地将缩放后的window.innerWidth数值定义为布局视口，这和前面“布局视口缩放时不变”的特性描述冲突，属于文档的表述失误。

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