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...