How to Add a Viewport Meta Tag
What is this?
The viewport meta tag tells mobile browsers how to scale and size the page. Without it, mobile browsers render the page at a desktop width (typically 980px) and then shrink it to fit the screen, making text tiny and unusable.
Why it matters
- Mobile usability: Without a viewport tag, your page is unusable on phones without pinch-zooming
- SEO: Google uses mobile-first indexing. Pages without a viewport tag are penalized in mobile search.
- Compliance: Required for WCAG 2.1 mobile accessibility compliance
How to fix it
Add this tag inside the <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
Allowing user zoom (recommended for accessibility)
<!-- Good: allows users to zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bad: prevents zooming (accessibility violation) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Framework templates
Most modern frameworks include this by default. If yours does not:
Next.js: Already included via pages/_document.js or app/layout.tsx.
Django: Add to your base template:
{% block viewport %}
<meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %}
Common mistakes
- Setting
maximum-scale=1oruser-scalable=no. This prevents users from zooming and is an accessibility violation (WCAG 1.4.4). - Forgetting the viewport tag when building a responsive site. Without it, media queries do not work correctly on mobile.
- Using
width=1024or a fixed width instead ofdevice-width.
Test your fix
After adding the viewport tag, audit your site on BeaverCheck to verify in the Compliance tab.