Hi all,
I’ve been asked to make a responsive design, so I opted to use the skeleton framework as a starting point. This by default includes
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Now my peer has turned around to me and said this prevents users from using the zoom mode on mobile devices. On the other hand it prevents my website from scaling to fit on a mobile device. Catch22.
So at what point do we draw the line here? I am unsure what to do 
It’s better just to use this:
<meta name="viewport" content="width=device-width">
There’s a really good video by PPK (and also an [URL=“http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html”]article) in which he goes into a lot of detail why. But basically, that line of code ensures that your layout will fit nicely within the device viewport. It’s an important tarting point for any mobile design.
More info here:
Make sure you add <meta name-=”viewport” content=”width=device-width”>. Most mobile devices set your webpage in a 960px viewport. iOS does this so most sites look alright.
If you use this in iOS there’s an issue….add maximum-scale=1, but keeps the user from being able to scale the page. Set initial-scale=1 but it means that rotating causes another bug. There is a fix for this bug, ios-orientationchange-fix.js .
“Now my peer has turned around to me and said this prevents users from using the zoom mode on mobile devices.”
But the whole idea is to build to fit the device, so why would a user need to scale the page if its done right? I build my content to fit the devices from mobile phone to tablet. Since they fit, they don’t need zooming.
I usually need to zoom (on mobiles or even the ipad) even if the layout fits the device otherwise I can’t read normal text even with glasses on. It’s never wise to mess with a users ability to resize a layout or change a function that is commonplace. Users may think their device is broken if they suddenly can’t zoom 