How to use our viewport size and screen resolution checker tool?
Our viewport size checker tool above automatically displays the viewport size of the browser or device it is opened on.
Viewport size also automatically updates if you resize your browser window or change the orientation on your mobile or tablet.
The tool has a click to copy feature so you can click or tap on the viewport width (vw) or viewport height (vh) to copy the values.
Beneath the viewport size, there is your display's current DPR (Device Pixel Ratio) and screen resolution information, which also automatically displays on page load and updates if the tool detects change in DPR and resolution of the screen.
Understanding viewport size
Viewport size is the size of the area on your web browser where you see the webpage. It excludes parts like title bar, URL bar, bookmarks bar, and any scroll bars (vertical or horizontal) on your browser window.
As different types of devices have different screen sizes and accordingly different viewport sizes, by checking the correct viewport dimensions, i.e. viewport width (vw) and viewport height (vh), web designers and developers can optimize the responsiveness of the websites to make them good looking and easy to use on all types of screen sizes.
What is Device Pixel Ratio (DPR)?
The device pixel ratio (DPR) is the ratio of physical pixels of your screen to the logical pixels on your display. What does that mean? Allow me to explain!
Physical pixels are the actual tiny dots on your screen that light up to create images. Logical pixels (also known as CSS pixels) are what websites use to measure and display content.
The DPR tells us how many physical pixels are used to display one logical pixel.
For example, a DPR of 1 means one physical pixel is used to display one logical pixel and DPR of 2 means four physical pixels (2x2) are used to display one logical pixel likewise DPR of 3 means nine physical pixels (3x3) and DPR of 4 means 16 physical pixels (4x4) are used to display one logical pixel.
As you would have guessed, higher DPR means sharper and clearer images and text on your screen. This is why Apple's Retina displays appear so sharp, as they have a DPR of 3!
Usually modern smartphones have DPR of 3 or 4, while tablets have DPR of 2 or higher, and desktops and laptops usually have DPR of 1 or 2.
What is Native Screen Resolution?
The Native Screen Resolution displayed in our tool above is the maximum resolution your display supports. It is the actual number of physical pixels on your device's screen.
For example, a Full HD screen has the resolution of 1920 x 1080 pixels. This resolution represents the total number of pixels horizontally and vertically on your device's screen.
Higher native resolution means more detailed and sharper images, as there are more pixels to work with.
What is Effective Screen Resolution?
The Effective Screen Resolution displayed in our tool above is the resolution at which content is currently displayed on your screen. It is basically the DPR adjusted resolution of your display if your DPR is higher than 1 which is when your screen's effective resolution is not same as the native resolution.
For instance, if you have a laptop with 4K display (3840 x 2160) but you have set the display scaling to 200% (i.e. DPR of 2) from your operating system settings, then your effective screen resolution would be 1920 x 1080.
This means that while your screen has 3840 x 2160 physical pixels, it's currently using those pixels to show content at 1920 x 1080. Meaning, one logical pixel is taking 4 physical pixels (2x2) on the display, so you see content at much higher quality.
Note: The Effective Screen Resolution in our tool is not displayed if your device's DPR is equal to 1, as at DPR of 1 your screen's resolution will be its native screen resolution.