The Viewport Meta Tag

There is one line of HTML that responsive design depends on. Without it, a phone assumes the page was built for desktop, renders it about 980 pixels wide, and shrinks the whole thing to fit the screen. Text becomes tiny and your media queries never match as expected.

The tag

Put this in the <head> of every page:

1

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

• width=device-width says “the page is as wide as the device’s screen”.
• initial-scale=1 says “start at 100% zoom”.

With it, a 390px wide phone gets a 390px wide layout, and your CSS can adapt to that.

What not to add

You may see older snippets with maximum-scale=1 or user-scalable=no. These stop people from pinching to zoom. That is an accessibility problem for people with low vision, and browsers on iOS and Android often ignore it anyway. Leave them out.

Testing without a phone

Your browser’s developer tools have a device toolbar (often a small phone and tablet icon, or the shortcut Ctrl+Shift+M). It lets you pick a device size and see the page at that width, and turn on a throttled network connection too.