responsive/viewport-meta

Why

Without it, mobile browsers lay the page out at a desktop width (usually 980 px) and shrink it, so text is tiny and media queries never match.

Fix

Put <meta name="viewport" content="width=device-width, initial-scale=1"> in the head of every document. Next.js and Nuxt add it for you; plain HTML, Astro layouts and SvelteKit's app.html need it written.

Examples

<!-- bad -->
<head><title>Shop</title></head>
<!-- good -->
<head><meta name="viewport" content="width=device-width, initial-scale=1"><title>Shop</title></head>

Sources

• MDN, the viewport meta tag
• W3Schools, Responsive web design viewport

Read it in the terminal

npx github:dawidolko/frontend-skills explain responsive/viewport-meta