Mobile Viewport Simulator

vw (viewport width) and vh (viewport height) are relative CSS units. 1vw = 1% of the viewport width, 1vh = 1% of the viewport height. On a 375px wide phone, 100vw = 375px and 50vw = 187.5px. These units are useful for full-screen layouts but have quirks — on mobile, 100vh includes the browser toolbar height, which iOS Safari addresses with svh/lvh/dvh units.

These are new viewport units that account for mobile browser toolbars: svh (small viewport height) = height when all browser UI is visible (most conservative). lvh (large viewport height) = height when all browser UI is hidden. dvh (dynamic viewport height) = adjusts dynamically as the browser toolbar shows/hides. Use dvh for most mobile full-height layouts, svh for the safest minimum.

Device pixel ratio (DPR) is the ratio of physical pixels to CSS pixels. iPhone 15: DPR 3 (460×1000 physical, ~390×844 CSS). Most Android flagships: DPR 2-3. Standard desktop: DPR 1. In CSS, use @media (-webkit-device-pixel-ratio: 2) or @media (resolution: 2dppx) to target high-DPI screens. In JS, use window.devicePixelRatio.

iOS devices with notches/dynamic islands have safe area insets that your content should avoid. Use env(safe-area-inset-top/right/bottom/left) in CSS to add appropriate padding. Set the viewport meta tag to: content='width=device-width, initial-scale=1, viewport-fit=cover' to enable safe area support.

The recommended viewport meta tag is: <meta name='viewport' content='width=device-width, initial-scale=1'>. This sets the viewport width to the device width and prevents the browser from zooming in on load. For PWAs that should not be user-scalable: add 'user-scalable=no', though this hurts accessibility. Never omit the viewport meta tag on mobile-targeted sites.