05 / BROWSER CONTEXT
Read screen size, page size and DPR.
Compare the readings as you resize the window or change zoom.
Updates automatically as this window changes.
Tips for comparing readings
Change the window. Watch the numbers.
Move this window onto the display you want to check. Resize it or change zoom to compare the readings.
- Choose the display
- Try a window size or zoom
- Copy a snapshot to compare
Unavailable
Screen width × height in CSS pixels. The page’s space appears under Layout viewport.
- Layout viewport
- Unavailable
Window inner width × height; includes scrollbars.
- Device pixel ratio (DPR)
- Unavailable
Device pixels per CSS pixel; page zoom can affect it.
Screen and page, in proportion
CSS PIXELSMore browser detailsAvailable area, zoom & orientation
- Available screen area
- Unavailable
Screen area available to windows.
- Screen × DPR estimate
- Unavailable
Screen CSS dimensions multiplied by the current DPR; depends on zoom and scaling.
- Visual viewport
- Unavailable
Visible page area, when the browser exposes it.
- Visual viewport scale
- Unavailable
Scale of the visible page area, including pinch zoom.
- Reported orientation
- Unavailable
Browser orientation type and angle, when available.
All dimensions are width × height. Values show up to 2 decimals; DPR and scale show up to 4. ≈ marks our display rounding. Browser privacy settings may round or hide values too.
Readings are processed on this device. Use Copy report to keep a snapshot on your clipboard.
Which screen size does a website see?
A browser exposes several useful sizes. Screen size describes the display it reports, while the layout viewport describes the page’s current space inside the browser window. A smaller window can have the same screen size and a smaller viewport. The Screen API reports CSS pixels, which do not necessarily correspond one for one with the physical pixels in a panel.
The available screen area is the space the browser reports as available to windows; system interface areas can make it smaller than the full screen. For this page’s space, use the layout viewport. See MDN’s available-width reference.
Use the right size for the question
- Checking a responsive layout? Use the layout viewport and resize the window. These readings use innerWidth and innerHeight, including scrollbars.
- Comparing a phone before and after pinch zoom? Check the visual viewport and its scale. The visual viewport dimensions describe the visible page area in CSS pixels, when supported.
- Moving between displays? Put the window entirely on the display you want to inspect. The page follows supported size, orientation and DPR change events. Use Refresh readings if the browser has not supplied an update.
How DPR relates CSS and device pixels
Device pixel ratio relates device pixels to CSS pixels. Browser page zoom can change DPR; pinch zoom magnifies the page separately. The DPR documentation explains that distinction. A DPR of 2 describes two device pixels per CSS pixel. Physical diagonal and native resolution come from the display’s specification. The visual viewport scale is a separate reading, not a reliable percentage for the browser’s page-zoom setting.
Screen × DPR multiplies the two browser-reported dimensions by the current ratio. It can be a useful pixel estimate in a matching display and scaling context. Page zoom, operating-system scaling, browser behavior and rounded values mean it cannot establish native panel resolution. Use the display’s specification for native resolution.
Find your physical screen size
For the physical diagonal, check the display’s specifications or measure between opposite corners of the visible screen. With a known diagonal and pixel resolution, the PPI calculator can calculate density and physical dimensions. Keep that calculation separate from this browser readout.
Copy a snapshot of your readings
Copy report captures the readings at that click. If clipboard access is unavailable, the page offers selected text you can copy manually. The tool does not send readings to a server or save a history. Language switching opens the equivalent page and takes fresh readings there; no device information is carried in the link.
Unavailable means the browser supplied no usable value for that field. The field stays unavailable until the browser supplies a usable reading. Numbers may be fractional; the display uses up to two decimal places for dimensions and four for ratios, with ≈ when we round. The browser can also reduce precision or hide screen details for privacy, as the CSSOM View specification describes.
What to check next
For browser animation timing, run the frame rate test. For a still-image concern, use screen inspection. For the differences between browser FPS, refresh rate and pixel response, read the measurement guide.