V
Viewport
Definition
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 “iPhone 14”.
- Use relative unitsPercentages, rem, clamp() and vw scale. Fixed pixel widths break.
- Test at real widthsIncluding 320px, and including landscape.
Let clamp() do the scaling
Use Elementor's per-breakpoint overrides for layout changes: stacking, hiding, reordering. Resist re-typing every font size per device; one clamp() value handles smooth scaling.
Related terms
Tip: use ← and → to move between entries.
The Friday email
One email a week. The thing I'd tell you over coffee.
What changed in WordPress and AI that week, what I'd actually use, and what I'd ignore. Written by me, not summarised by a tool.
- New tutorials the moment they're published
- Honest verdicts on tools, including the ones I dropped
- No sequences, no upsells, one click to leave
Free, forever, no signup
Pick a starting point. Have something real by tonight.
Every tutorial is free, complete, and built in real time, including the bits that break. Start where you are, not where a course thinks you should be.