Device Viewport Tester
Look up the CSS viewport size for common devices.
About the Device Viewport Tester
Shows the logical (CSS) viewport dimensions and device pixel ratio for popular phones, tablets and laptops, useful for responsive design testing.
How to use
Pick a device, then click Show.
Worked example
iPhone 14 Pro → 393 × 852 CSS px at pixel ratio 3.
How to use this calculator
- Open the Device Viewport Tester.
- Find the device you want to check from the list of common devices.
- Read the CSS viewport size shown for that device.
Step by step method
- Choose a device model or screen preset from the tool's common device list.
- Check the displayed viewport width and height in CSS pixels.
- Use the viewport size to compare how your page will fit on that device.
Worked example
Suppose you want to know the CSS viewport size for an iPhone 14 before testing a mobile layout.
- Open the tool and select iPhone 14 from the device list.
- Read the displayed viewport size, which shows the CSS width and height for that device.
- Use that size to preview whether your layout fits without unexpected scrolling or clipping.
Answer. The iPhone 14 viewport size shown by the tool is the CSS size to use for layout testing.
Tips and common mistakes
- Viewport size is not the same as the physical screen resolution.
- Use the CSS viewport value when testing responsive layouts, not the device's pixel count.
- If text or buttons look cramped, compare multiple device presets to spot breakpoints.
- Make sure you are checking the viewport and not the full device screen area.
Frequently asked questions
Why use CSS pixels?+
CSS pixels are what your media queries and layouts respond to, not the raw hardware pixels.
What is pixel ratio for?+
It tells you how many physical pixels map to each CSS pixel for crisp images.
More Tech Tools Tools
Explore related calculators in this category
Viewport Size Detector
Show your browser viewport dimensions and update live on resize.
AI API Cost Calculator
Estimate LLM API cost from input/output tokens and per-token prices.
Accessible Color Pair Finder
Check if a text/background pair meets WCAG and suggest a fix. Free tool with instant calculations, the underlying formula, and an easy-to-follow example.
Barcode Generator
Generate Code 128 / EAN barcodes from your data.
You Might Also Like
Popular tools from other categories
GraphQL Query Builder
Wrap a GraphQL query into a valid JSON request body and a cURL command for your endpoint.
Regex Tester
Test regular expressions against sample text and see all matches highlighted, with flags.
Webhook Payload Builder
Build a sample webhook POST request (JSON body + cURL) to test your endpoint locally.
.htaccess Generator
Generate common .htaccess rules, force HTTPS, www redirect, and caching, with checkboxes.
Can't Find the Right Calculator?
Try our AI Math Solver, type any problem in plain English and get instant step-by-step solutions.