Viewport Meta Tags Used on the “Top 20 Responsive Sites”

Last week, Social Driver listed 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 and have posted them as a gist.

Findings

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

However:

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

So, there is still some work to be done, before everyone gets it right. If you want to get started with viewport and responsive design on your site, check out my viewport Dev.Opera article and play with the understanding-viewport examples.