What is the viewport meta tag?
The viewport meta tag controls how your page is displayed on mobile devices. Without it, mobile browsers will render your page at a desktop width (typically 980px) and then scale it down to fit the screen, making text tiny and unusable.
Why is it critical?
Mobile-first indexing
Since 2019, Google uses mobile-first indexing — it primarily uses the mobile version of your page for ranking. Without a proper viewport tag:
- Google considers your page not mobile-friendly
- Your rankings in mobile search results will suffer
- You fail Google's Mobile-Friendly Test
User experience
- Over 60% of web traffic comes from mobile devices
- Without the viewport tag, users must pinch and zoom to read your content
- This leads to high bounce rates and low engagement
Core Web Vitals
The viewport tag affects Cumulative Layout Shift (CLS), one of Google's Core Web Vitals. Without it, the layout will shift when the browser calculates the actual viewport, harming your CLS score.
How to fix it
Add this tag inside your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1" />Understanding the values
width=device-width— Sets the viewport width to the device's screen widthinitial-scale=1— Sets the initial zoom level to 100%
Common variations
<!-- Standard (recommended) -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Prevent user zoom (use sparingly — hurts accessibility) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- Allow slight zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />Best practices
- Always include it — Every page should have a viewport tag
- Don't disable zooming —
user-scalable=nohurts accessibility - Use
device-width— Avoid setting a fixed pixel width - Combine with responsive CSS — The viewport tag alone isn't enough; your CSS must also be responsive
- Place it early in
<head>— The browser needs it before rendering