Always Twisted

This page is old.

Although the content of this page may be useful. The page was part of a migratian and may look different and unmaintained. I am working my way through, tidying them up.

🙏🖤

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.

Do you need help refactoring legacy CSS to align with modern standards?

I’ll modernize your legacy CSS to align with best practices.

get in touch!