http://socialdriver.com/2012/07/20-best-responsive-websites/ 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 additionalinitial-scale=1
. This is good practice.
However:
- 8 sites turn off pinch-zooming by setting
maximum-scale
to 1, or usinguser-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">
http://www.smashingmagazine.com/
<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" />
http://2012.newadventuresconf.com/
<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">
http://www.londonandpartners.com/
<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" />
http://www.unitedpixelworkers.com/
<meta name = "viewport" content = "width = device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>