Skip to main content
CodeRocket
HTMLcriticalmeta

Set the responsive viewport meta tag

rule · viewport

The viewport meta tag is essential for responsive web design, controlling how web pages are displayed on mobile devices.

Code Example

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Page</title>
</head>
<body>
    <!-- Your responsive content -->
</body>
</html>

Why It Matters

  • Mobile Experience: Ensures proper rendering on mobile devices
  • Responsive Design: Enables CSS media queries to work correctly
  • Touch Interface: Optimizes touch target sizes and interactions
  • Performance: Prevents unnecessary horizontal scrolling
  • SEO: Google considers mobile-friendliness as a ranking factor

Viewport Options

Standard Responsive Design

HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Advanced Configuration

HTML
<!-- Prevent zooming (use carefully - can harm accessibility) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
<!-- Allow limited zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=0.5">
 
<!-- Fixed width (rarely recommended) -->
<meta name="viewport" content="width=375">

Framework Examples

Next.js (App Router)

JSX
// app/layout.js
import { Metadata } from 'next'
 
export const metadata: Metadata = {
  viewport: 'width=device-width, initial-scale=1.0'
}
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Next.js (Pages Router)

JSX
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
 
export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

React (Helmet)

JSX
import { Helmet } from 'react-helmet'
 
function App() {
  return (
    <>
      <Helmet>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Helmet>
      <div>Your responsive content</div>
    </>
  )
}

Vue.js (Nuxt)

JavaScript
// nuxt.config.js
export default {
  head: {
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }
    ]
  }
}

Common Viewport Properties

PropertyDescriptionExample
widthSets viewport widthwidth=device-width
initial-scaleInitial zoom levelinitial-scale=1.0
maximum-scaleMaximum zoom levelmaximum-scale=3.0
minimum-scaleMinimum zoom levelminimum-scale=0.5
user-scalableAllow user zoominguser-scalable=yes

Best Practices

✅ Use Standard Settings: For most responsive sites

HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">

✅ Allow Zooming: Don't disable user-scalable unless absolutely necessary

HTML
<!-- Good - allows accessibility zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

❌ Don't Disable Zooming: Harms accessibility

HTML
<!-- Bad - prevents users from zooming for accessibility -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

❌ Don't Omit: Missing viewport tag breaks mobile experience

HTML
<!-- This will cause mobile display issues -->
<!-- No viewport meta tag -->

CSS Integration

The viewport meta tag works with CSS media queries:

CSS
/* Mobile-first responsive design */
.container {
  width: 100%;
  padding: 1rem;
}
 
@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
}

Accessibility Considerations

  • Don't disable zooming: Users with visual impairments need zoom functionality
  • Test with screen readers: Ensure responsive design works with assistive technology
  • Touch targets: Ensure interactive elements are properly sized for touch

Verification