Responsive Meta Tag

Avatar of Chris Coyier
Chris Coyier on (Updated on )

I tend to use this:

<meta name="viewport" content="width=device-width">

Although I see this is recommended a lot:

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

This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).

Note: don’t use a responsive meta tag if your website isn’t specifically designed to be responsive and work well at that size, as it will make the experience worse.

There are more attributes this tag supports:

Property Description
width The width of the virtual viewport of the device.
device-width The physical width of the device’s screen.
height The height of the “virtual viewport” of the device.
device-height The physical height of the device’s screen.
initial-scale The initial zoom when visiting the page. 1.0 does not zoom.
minimum-scale The minimum amount the visitor can zoom on the page. 1.0 does not zoom.
maximum-scale The maximum amount the visitor can zoom on the page. 1.0 does not zoom.
user-scalable Allows the device to zoom in and out. Values are yes or no.

It’s generally recommended that you don’t prevent scaling, as that’s annoying and potentially an accessibility problem.

You’ll probably want this in your CSS as well:

@-ms-viewport{
  width: device-width;
}

Good to know: changing the value of this meta tag with JavaScript does work, the page will react to the new value. Either out the entire tag and replace, or change the content property. Not a super common need, but it can come up.