Show My Viewport
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
Viewport META Tag
This is the viewport META tag I actually use for my site (and this web page), for your information.
Discussion and Links
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.
Research and Links
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
CSS Tricks: The Trick to Viewport Units on Mobile
CSS Tricks: Viewport Sized Typography
MDN: Using the Viewport Meta Tag article
CSS Tricks: Responsive Meta Tag
Mozilla Hacks: CSS Length Explained