Viewport & DPR calculator
Check your current browser viewport and device pixel ratio, or convert between CSS dimensions and device pixels to plan sharp web images. Calculations happen in your browser.
Convert pixel dimensions
Manual calculatorRaster dimensions round each axis up to a whole pixel. This is a sizing estimate, not a measurement of your physical screen or a guarantee of image quality.
How to use the viewport and device pixel ratio checker
- Read the live panel to see this page's current layout viewport, visual viewport and reported DPR.
- Choose Use current viewport & DPR to calculate an equivalent raster for the full viewport, or enter the CSS size of an individual image.
- Select a conversion direction and enter a positive DPR. Fractional ratios such as 1.25 are supported.
- Use the rounded-up raster dimensions when planning a whole-pixel export. Copy the result for your design or development notes.
The default 390 × 844 CSS-pixel example at DPR 3 corresponds to 1170 × 2532 device pixels. It is an illustrative size, not a claim about a particular phone model. If your image is only 200 CSS pixels wide, enter 200 rather than the width of the whole browser.
CSS pixels vs device pixels
A CSS pixel is a unit used for web layout. A device pixel is a sample in the display's pixel grid. Device pixel ratio describes the relationship between them for the current browser environment; it is not the same as the physical size or shape of a pixel. Operating-system scaling and browser page zoom can affect the reported value.
Device pixels = CSS pixels × DPRCSS pixels = device pixels ÷ DPRApply the formula to width and height separately. A 400 × 300 CSS-pixel image at DPR 2 has an 800 × 600 device-pixel equivalent. A 1200 × 900 raster at DPR 3 corresponds to 400 × 300 CSS pixels. Neither calculation changes an image file.
Read the browser definition and zoom behavior in MDN's devicePixelRatio reference. For the shape of non-square video pixels, use the separate pixel aspect ratio calculator: PAR and DPR solve different problems.
High-DPI image size examples
| DPR | Raster dimensions | Pixel count vs 1× |
|---|---|---|
| 1 | 400 × 300 | 1× |
| 1.25 | 500 × 375 | 1.5625× |
| 1.5 | 600 × 450 | 2.25× |
| 2 | 800 × 600 | 4× |
| 3 | 1200 × 900 | 9× |
Pixel count grows with DPR squared: doubling both dimensions gives four times as many pixels. File bytes do not necessarily grow by that same factor, because format, compression and image content also matter. Avoid sending the largest raster to every visitor without considering transfer size.
A fractional product can require rounding. For 301 × 201 CSS pixels at DPR 1.25, the exact equivalent is 376.25 × 251.25. This tool recommends a minimum whole-pixel raster of 377 × 252. Independent rounding can slightly change the ratio; preserve the intended CSS layout and review the exported image.
What is my viewport size?
The layout viewport is the browser area used to lay out the page, not the entire monitor and not the browser window's outer frame. This checker uses window.innerWidth and window.innerHeight. These measurements include rendered scrollbars; the root client-area readout excludes them. See MDN's innerWidth reference.
The visual viewport describes the currently visible portion of the page. Pinch zoom, browser controls and an on-screen keyboard can affect the visible area, depending on browser behavior. The checker reports the Visual Viewport API when available and shows “Not available” otherwise. Its scale is a visual viewport scale, not a reliable reading of desktop page-zoom percentage. See the VisualViewport API.
Resizing or rotating a device updates the live readings. A calculation you entered manually stays unchanged until you edit it or press the snapshot button again. This lets you compare a target layout with the current browser without losing your work.
Use DPR for web images, not CSS breakpoints
Choose layout breakpoints based on available CSS width and the needs of your content. Do not multiply a media-query breakpoint by DPR: a narrow high-density phone does not become a wide desktop layout just because its display has more pixels.
For images, start with the rendered CSS dimensions, then calculate suitable raster candidates for the densities you want to support. Responsive images can help the browser choose an appropriate source. Use explicit image dimensions or an aspect ratio to reserve layout space, and compress exports before publishing. The calculator provides dimensions only; it does not generate srcset markup or decide which file a browser will download.
For a canvas, CSS display dimensions and backing-store dimensions are separate. A high-DPI backing store may need more pixels while retaining the same CSS size. Very large backing stores consume memory, so this calculator never allocates an image or canvas for the dimensions you enter.
Viewport & DPR FAQ
Does DPR 2 mean twice as many pixels?
It means twice as many device pixels along each CSS dimension, or four times the area for a rectangle. It does not mean an image file will be exactly four times larger.
Why is my device pixel ratio a decimal?
Display scaling and page zoom can produce fractional ratios. Use the reported value for your current environment rather than assuming every screen is 1×, 2× or 3×.
Can this detect my monitor's native resolution?
No. It reports browser viewport metrics and DPR. Their product is an equivalent pixel size for that viewport, not proof of the panel's native resolution. Browser scaling and privacy protections can affect reported values.
Why does pinch zoom change the viewport?
Pinch zoom can reduce the visible CSS area while preserving the layout viewport. The visual viewport and scale readings help distinguish this from a layout resize. Exact behavior varies by browser.
Is DPR the same as DPI or PPI?
No. DPR is a ratio between device and CSS pixels; PPI is pixels per physical inch and DPI describes printer dots per inch. Use the print size & DPI calculator for physical print dimensions.
Will a 3× image always look sharper?
No. It needs sufficient source detail and must be displayed appropriately. Enlarging a blurry source adds pixels but cannot recover missing detail. Balance density with compression, loading time and the intended display size.