MDN seems to have contradicted itself. Here are a few statements made on the doc:

Definition of a layout viewport:

The area within the innerHeight and innerWidth is generally considered the layout viewport.

Properties of 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.

Contradiction:

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.

So, they claimed the layout viewport's size cannot change upon zooming. Window.innerWidth is the width of the layout viewport. If Window.innerWidth is the width of the layout viewport, and the size of the layout viewport cannot change, how come Window.innerWidth's value changed upon zooming in?

CodePudding user response：

Well, pinch-zoom on mobile is simply not the same as zooming on desktop. The zooming done via an pinch-gesture does not change the page layout. It performs the magnification effect on the page as is.