EngineeringScoreBest Practices Small
Add a responsive viewport tag
A responsive viewport tag is what lets the rest of a site's responsive CSS actually take effect on a phone or tablet. Without it, mobile browsers render the page at a fixed desktop-like width and scale it down, making text unreadably small and forcing visitors to pinch and zoom just to read anything.
Why it matters
Without a responsive viewport tag, the page renders at desktop width on phones, forcing visitors to pinch and zoom, which drives them away.
How to fix
- 1 Add <meta name="viewport" content="width=device-width, initial-scale=1"> to <head>.
- 2 Confirm layouts adapt correctly at common breakpoints.
Common mistakes
- Adding the tag with a fixed pixel width instead of width=device-width, which still forces the same desktop-scaled rendering problem.
- Applying it inconsistently across templates, so some pages (e.g. an old landing page or an email-generated page) never got the tag.
- Combining it with an overly restrictive maximum-scale/user-scalable=no, trading one usability problem for an accessibility one.
How to verify
- 1 View page source and confirm <meta name="viewport" content="width=device-width, initial-scale=1"> is present.
- 2 Load the page on a real mobile device or a device emulator at common breakpoints and confirm the layout adapts correctly.
- 3 Check less-visited templates (landing pages, error pages) to confirm the tag was not missed on a different layout.
Related checks
Ready to see where you stand?
Scan your site and get your Engineering Score with a prioritized roadmap in under a minute, no signup required.