The visible area of a web page within a user's browser window or device screen. Varies by device and affects what content is visible without scrolling.
The <meta name='viewport' content='width=device-width, initial-scale=1'> tag ensures the page scales correctly on mobile devices.
The top 5 most common screen resolutions accounting for 60%+ of global web traffic range from 360×800px (mobile) to 1920×1080px (desktop) — a 5x difference in height — highlighting why viewport-relative design is essential for all screen sizes, according to StatCounter.
Browser window, Screen size, Display area
-
Every responsive website. The viewport is the canvas your design renders on — understanding it is fundamental to designing layouts that work across devices.
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width tells the browser to set the viewport width to the device's actual screen width — not the default 980px desktop width that mobile browsers historically assumed.initial-scale=1 prevents the browser from zooming in or out on first load.100vw = 100% of the viewport width. Use for full-width sections.100vh = 100% of the viewport height. Use for full-screen hero sections. Note: on mobile, 100vh includes the browser chrome height — use the CSS environment variable dvh (dynamic viewport height) for more accurate full-screen mobile sections.vmin / vmax = the smaller / larger of vw and vh. Useful for proportional sizing across orientations.Webflow adds the viewport meta tag automatically to all published pages. Use VH units in the Size panel for hero sections. Test across real devices and Chrome DevTools Device Mode at multiple common resolutions before publishing.
Answer
%20(1).png)