Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Viewport meta tags used by the 20 sites that are listed in Social Driver's "20 Best Responsive Web Design Examples of 2012"

Intro lists 20 sites that are supposedly best-in-class when it comes to responsive design techniques. I had a look at the viewport meta tags used in these sites.


  • All sites use width=device-width, with in most cases an additional initial-scale=1. This is good practice.


  • 8 sites turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. While there are some corner use cases for this, it does not make sense to do this on text-heavy sites as it impairs accessibility.
  • 3 sites use semi-colons as delimiters between viewport values. While this works in newer mobile browsers, it's not officially supported, and breaks in older mobile browser versions.
  • 1 site has 2 viewport meta tags (with different values) in the source...
  • 1 site sets an explicit value for target-densitydpi. While there are some corner use cases for this, it's better to leave this up to the browser to decide. In this case, the site's fonts look strangely big on high-DPI screens.


(collected on July 17th, 2012, with Opera/9.80 (Macintosh; Intel Mac OS X 10.7.3; U; en) Presto/2.10.289 Version/12.00)

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />>

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'>

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

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

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

<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">

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

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

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

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

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


This comment has been minimized.

Copy link

@paulirish paulirish commented Jul 17, 2012

I'm curious how IE10 plans to deal with this since they dont support meta viewport and only support @-ms-viewport:


This comment has been minimized.

Copy link

@patrickhlauke patrickhlauke commented Jul 17, 2012

And I'm curious if Webkit and Mozilla will use @Viewport - conceptually, it makes more sense (as it's visual/styling related) to keep this in CSS rather than in HTML.


This comment has been minimized.

Copy link

@bradfrost bradfrost commented Jul 17, 2012

Great analysis. Perhaps the title of the post should have read "20 Best Looking Responsive Web Design Examples of 2012"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.