The description for `device-width` and friends in `meta viewport` is not only wrong, but unclear and arguably useless

[DavidJCobb]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

The description of the device-width and device-height values is unclear and incorrect. The purpose of the width and height values is to control how many pixels 100vw and 100vh are. Any value you use is equivalent to 100vw and 100vh, and every value you didn't use isn't. If you set the width to a number that isn't what device-width would've computed to, then device-width is not 100vw, because you have set 100vw to a different number.

Load two different pages: one with the meta viewport set to 1000, and another with it set to device-width. On both pages, use the debugger to set the html element's CSS width to 100vw. Observe the element's size in the Computed panel both before and after you set its CSS, and note that the width does not change.

There is one exception to this. If the page's width in CSS pixels is wider than the viewport width (e.g. because even one single element on the page was set to a wider size), then Google Chrome will compute and use a larger value for the viewport width in order to fit the page, but it will not similarly enlarge the size of 100vw. In those cases, 100vw will be smaller than the width of the screen (which is insane, by the way). However, it's still the case that the specified viewport width in the meta tag sets the size of 100vw; it is never set to the size of 100vw, as MDN's current documentation seems to claim.

What did you expect to see?

An actual, meaningful description of what device-width and device-height are, and how they're calculated in Firefox (if not in all browsers for which the calculation is documented or can be reverse-engineered).

For comparison purposes, Google has documentation which almost manages to explain how the values are computed.

1. Take the device pixel resolution (possibly excluding pixels consumed by the OS-level UI, such as the top status bar and bottom action bar).
2. Take the device's pixels per inch. (If you excluded any pixels in the previous step, then here exclude the physical size those pixels fill.)
3. Divide the pixels per inch by 160 to get the "density" as reported by DisplayMetrics.density in the Android API. This value is the conversion factor between Android px and dip.
4. Divide the device pixel resolution by the "density."

In essence, Google Chrome converts the device resolution to 160 DPI, and then feeds the raw numbers into CSS (which assumes 96 DPI) without actually converting them to 96 DPI. I've run these same calculations using my own smartphone and they match what I see when using Chrome's remote debugging on a page with width=device-width. Google has accurately documented how their system works (although the word "works" is doing some real legwork here).

Do you have any supporting links, references, or citations?

Here and here as explained above.

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/html/viewport_meta_tag
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/viewport_meta_tag/index.md
• Last commit: https://github.com/mdn/content/commit/730d99b6f2830adccce4bd61e81e79ad5a87c941
• Document last modified: 2022-11-02T04:28:45.000Z