Why does the viewport shrink when the on-screen keyboard opens?

Mobile browsers adjust the visual viewport when the keyboard appears. Use `visualViewport` APIs or reserve space in your layout.

What is device pixel ratio?

DPR is physical pixels per CSS pixel. High DPR displays need higher-res images to stay sharp.

Does fullscreen change media queries?

Yes, the viewport size updates. Use the fullscreen toggle here to see the values your app will receive.

Browser Diagnostics

Screen Test

Viewport and display diagnostics

Screen & Viewport

Display dimensions and pixel density

0 × 0

📐

Viewport

0 × 0px

✨

Device Pixel Ratio

🎨

Color Depth

24-bit

When to use this test

Quickly confirm CSS breakpoints, DPR, and color depth when debugging blurry images or layout shifts. Responsive designs often key off `min-width`; this page shows the live values your app will see, including fullscreen changes.

If DPR is fractional (e.g., 1.25) and images look soft, provide higher-res assets or use `srcset` with `2x` variants. Color depth below 24-bit can affect gradients on older displays.

Fix common display issues

If pages look zoomed, blurry, or stuck in a mobile layout, use these guides and re-check your live viewport values after each change.

Blurry text / zoomed UI →Mobile layout on desktop Fullscreen not working

FAQ

Why does the viewport shrink when the on-screen keyboard opens?: Mobile browsers adjust the visual viewport when the keyboard appears. Use `visualViewport` APIs or reserve space in your layout.
What is device pixel ratio?: DPR is physical pixels per CSS pixel. High DPR displays need higher-res images to stay sharp.
Does fullscreen change media queries?: Yes, the viewport size updates. Use the fullscreen toggle here to see the values your app will receive.