Important Note: This app is currently still being developed and researched. However, it is quite usable as is. The explanatory text is incomplete as I research facts and test more with different devices.

Viewport META Tag

This is the viewport META tag I actually use for my site (and this web page), for your information.



    

Layout Viewport

innerWidth



    

innerHeight



    

Layout Viewport (CSS Pixels)



    

Viewport

clientWidth



    

clientHeight



    

Viewport (CSS Pixels)



    

Further Useful Information

Device Pixel Ratio (dpr)



    

Dots per Inch (dpi)



    

Dots per Centimeter (dpcm)



    

Dots per Pixel (dppx)



    

Screen Width (CSS Pixels)



    

Screen Height (CSS Pixels)



    

Screen Width (Device Pixels)



    

Screen Height (Device Pixels)



    

Available Width



    

Available Height



    

Orientation



    

Pixel Depth



    

Color Depth



    

This app auto-updates on resize, for instance, rotating a mobile device or resizing a browser window.

This web app uses JavaScript to query two different viewports. Neither of the below viewports include the browser chrome.

The visual viewport differs from these viewports in that the visual viewport is only the part of the “layout viewport” that is visible on the screen at any given time. For instance, on a mobile device, if an on-screen keyboard pops up, the visual viewport does not include the part of the layout viewport it hides.

Layout Viewport Discussion

According to MDN Viewport Concepts, this is generally considered the actual layout viewport.

Uses the window.innerWidth API. In CSS pixels. Includes vertical scrollbar, if any.

Uses the window.innerHeight API. In CSS pixels. Includes horizontal scrollbar, if any.

Layout viewport is width x height as reported by the APIs noted immediately above.

Viewport Discussion

The MDN Viewport Concepts article mentioned above states that the width and height used here are actually the “viewport width” and [by my extension] the “viewport height”, so I am just the calling this the “viewport”.

In my testing with a static element that is wider than the device widths in the responsive emulator on Chrome, this viewport agrees with the displayed device width and height in the emulator.

This is therefore consistent with my research and the W3C specs in that, as a special case, if the below APIs are used with the “root element”, they just return the appropriate values for the “viewport”. I still need to further research the actual meaning of the terms “root element” and “viewport,” though, so clearer explanations will be forthcoming.

Uses the document.documentElement.clientWidth API. In CSS pixels. This is a special case of the clientWidth API on the root element that just returns the viewport width.

Uses the document.documentElement.clientHeight API. In CSS pixels. This is a special case of the clientHeight API on the root element that just returns the viewport height.

Viewport is width x height as reported by the APIs noted immediately above.

Further Useful Information discussion

This heading above contains miscellaneous device and screen/display specific information and calculations.

Note that the Device Pixel Ratio (dpr) which is the device pixels / CSS pixels, is as reported by the browser, and my not accurately reflect device pixel to CSS pixel ratio (also known by the acronym dppx) due to manipulation by the device for compatibility reasons.

Therefore, while the CSS pixel widths and heights should be accurate, the device pixel width and height may not reflect maximum manufacturer specs because it is calculate using the dpr.

Also, if the device pixel width and height are lower than the manufacturer specification, you may need change your device display resolution setting to a higher value, if possible.

For instance, on my Samsung Galaxy S20 FE 5G phone, the manufacturer specs indicate higher values for the display device resolution than this app reports. Also, the dpr (dppx) is 3 instead of 4. A value of 4 used in the calculations would correctly result in a maximum device resolution which agrees with the manufacturers spec.

There is no setting in the S20 FE to change the resolution, so it appears to have been locked down lower than the capabilities of the actual display hardware by the software for some reason.

The cheaper S20 “FE” (Fan Edition) that I bought gives me less capability in this area than my old Galaxy S8. The S8 does have a setting to change the screen resolution. When the S8 resolution is changed to the maximum setting, it has a dpr (dppx) of 4 and a higher resolution reported by this app than my much newer S20 FE.

The calculations for the device width and height resolutions shown by this app agree with the S8 manufacturer stated specs when the highest resolution is chosen in the S8 settings.

The research I did and explanations you can read are in the following links. Further research, especially referring to actual specs, forthcoming:

Mozilla Developer Network (MDN): Viewport Concepts

MDN: Element.clientWidth article

MDN: Element.clientHeight article

W3C Working Draft (2016): clientWidth

W3C Working Draft (2016): clientHeight

W3C Working Draft (2016): viewport

MDN: Device Pixel Ratio (dpr) Article

MDN: Screen Article

CSS Tricks: The Trick to Viewport Units on Mobile

CSS Tricks: Viewport Sized Typography

MDN: Chrome

MDN: Using the Viewport Meta Tag article

CSS Tricks: Responsive Meta Tag

MDN: Device Pixels Article

MDN: CSS Pixels Article

Mozilla Hacks: CSS Length Explained

Important Note: Some values in the Further Useful Information section are experimental or potentially manufacturer altered for compatibility as noted.
Important Note: Screen specific information refresh on resolution change or dragging to different display in multiple display systems not yet implemented. Please manually refresh this web page for now on resolution change or drag to new screen.