Unable to get iPhone website version to scale/zoom

Question

I'm having a problem with my site and handheld devices. For some odd reason after trying most techniques out there, I can't seem to get the page to zoom out, or scale right to fit the device.

My link to my specific style sheet is working however, just the meta data seems to be out of wack! It is a Wordpress site and currently this is all the meta I have:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

<?php if (is_search()) { ?>
     <meta name="robots" content="noindex, nofollow" /> 
<?php } ?>

When looking at the site on mobile phones, it's zoomed in and you have to pan around with your finger. You are unable to zoom in or out.

Anyone have an idea why it wont work?

Answer 1

You've turned user scaling off. Remove user-scalable=0 and you should solve that particular problem.

You should also get rid of the maximum-scale setting unless you have a reason for not liking the default, which is 5.

"User-scalable: Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling.

The default is yes.

Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field.

Available in iOS 1.0 and later."

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

(Note: 1 and 0 are sometimes used in place of true/false and yes/no. Here, your 0 is the same as no.)