Viewport
The viewport is the visible area of a web page inside the device’s screen, the frame your layout has to work within.
In plain English
A phone is not a small desktop. Its viewport is roughly 390 points wide in portrait, with a browser bar eating the top.
Responsive design means writing rules that respond to viewport size: at this width stack the columns, below that hide the sidebar. The viewport meta tag is what tells a phone to use its real width instead of pretending to be a desktop and zooming out.
Why it matters
Most of your visitors are on a phone. If your layout is designed at 1440 pixels and merely checked on mobile at the end, mobile is where it will feel worst, and mobile is where the traffic is.
Designing with the viewport in mind from the first screen prevents almost all of it.
How it works
-
Include the viewport meta tagWithout it, phones render a zoomed-out desktop page.
-
Design in ranges, not devicesSet breakpoints where your content breaks, not at a specific handset.
-
Use relative unitsPercentages, rem and viewport units scale. Fixed pixel widths break.
-
Test at real widthsIncluding the narrowest phones, and including landscape.
Let fluid sizing do the scaling
Use Elementor’s per-breakpoint overrides for layout changes, stacking, hiding, reordering. Resist re-typing every font size per device; one fluid value handles smooth scaling.