About

Responsive design is not optional. Modern web traffic is dominated by mobile devices with varying aspect ratios and pixel densities. A design that functions on a 4K monitor may break completely on a foldable smartphone or a budget tablet. This tool simulates the viewport dimensions of specific hardware to verify CSS media queries and layout flexibility.

Development environments often differ from production reality. While browser developer tools offer simulation, a standalone environment allows for quick checks of specific URLs and side-by-side comparisons without altering browser internals. This simulator calculates the precise CSS Width and CSS Height required for targeting breakpoints. It handles the translation between physical device pixels and logical viewport pixels using the Device Pixel Ratio (DPR).

Important Constraint: Many high-traffic websites (Google, Amazon) implement an X-Frame-Options header set to SAMEORIGIN or DENY. This security protocol prevents their pages from loading inside an iframe. This tool is engineered for developers testing their own projects, local servers (localhost), or staging environments where these headers can be controlled.

Formulas

Understanding the relationship between physical hardware pixels and the CSS pixels used in media queries requires the Device Pixel Ratio (DPR).

CSS_width = Physical_widthDPR

When calculating the diagonal size in inches for density (PPI) estimations, we use the Pythagorean theorem on the physical resolution:

Diagonal = √w² + h²

The scale factor for visualization ensures the viewport fits within the available monitor space while preserving the aspect ratio:

Scale = minContainer_widthDevice_width, 1

Reference Data

Device Name	Logical Width (CSS px)	Logical Height (CSS px)	DPR (Density)	Physical Size
Apple iPhone 14 Pro Max	430	932	3.0	6.7"
Apple iPhone 14 / 13	390	844	3.0	6.1"
Apple iPhone SE (3rd Gen)	375	667	2.0	4.7"
Google Pixel 7 Pro	412	892	2.6	6.7"
Google Pixel 6a	412	915	2.6	6.1"
Samsung Galaxy S23 Ultra	412	915	3.0	6.8"
Samsung Galaxy Z Fold 4 (Unfolded)	768	1076	3.0	7.6"
Samsung Galaxy Z Fold 4 (Folded)	373	902	3.0	6.2"
iPad Pro 12.9" (6th Gen)	1024	1366	2.0	12.9"
iPad Air (5th Gen)	820	1180	2.0	10.9"
iPad Mini (6th Gen)	744	1133	2.0	8.3"
Surface Pro 8	912	1368	2.0	13.0"
MacBook Air (M2)	1470	956	2.0	13.6"
Desktop 1080p	1920	1080	1.0	24"+
Desktop 1440p (2K)	2560	1440	1.0	27"+
Desktop 4K (UHD)	3840	2160	1.0	32"+
Apple Watch Ultra	192	242	2.0	49mm

Frequently Asked Questions

This is a security feature, not a bug. Major websites like Google, Facebook, and banking portals send an HTTP response header called X-Frame-Options set to SAMEORIGIN. This tells the browser to block the site from being displayed inside an iframe on a different domain. This tool works best for testing your own websites, localhost projects, or sites that do not enforce this restriction.

No. This tool visualizes layout dimensions and aspect ratios. It simulates the viewport size (CSS pixels). It does not emulate hardware specific behaviors like touch gestures, GPS latency, or network throttling. For full hardware emulation, use browser DevTools or a physical device lab.

If your local server is running (e.g., http://localhost:3000), simply enter that URL into the input field. Ensure your local server does not have strict Content-Security-Policy (CSP) headers that block embedding. If it fails, check your browser console for mixed-content errors (trying to load HTTP localhost inside an HTTPS tool).

Physical resolution refers to the actual number of LEDs/pixels on the screen matrix (e.g., 1170x2532 on an iPhone 12). Logical resolution (CSS pixels) is what the browser sees (e.g., 390x844). The browser scales content up by the Device Pixel Ratio (DPR) so text remains readable on high-density screens.