Don't do this in responsive web development
On This Page:
I've just read this article from @netmag on how to 'build a responsive site with CSS' and wanted to quickly share something.
In the post (a republication of an article they printed in June/July of 2012) they quickly discuss the meta tag for viewport.
In the example code they use the maximum-scale, like this –
This stops the user from zooming into your site. Yes you've designed it and coded it for a narrow viewport from something like an iPhone. That doesn't mean the sites visitor doesn't want to zoom in, perhaps they have difficulty with their sight.
So please. Don't include that. Use this instead –
<meta name='viewport' content='width=device-width, minimum-scale=1.0' />
This means the visitor can zoom into the site (perhaps to take a finer look at a photo) and is a quick accessibilty win.
Update.
I was asked on twitter how I handle the 'orientation-change zoom-screwery' I mentioned that (thus far) I've not found any botheration from clients that it does this (sidenote: perhaps it's a 'developer thing').
But there is a fix from the guys at Filament Group using Javascript which is discussed in this fine blogpost from Scott Jehl.
Update Updated.
I had a quick tweet from @snugug reminding me that the orientation bug is fixed in iOS 6+ and recommending using initial-scale rather than minimum-scale (which I agree with and have updated the post).
Update, Update Updated.
On the 23rd of October I looked into the code of a newly launched site to see
Needless to say, don't do that either. Adding:
user-scalable=no
Is just as bad.
