Page width in Mobile/iOs

I have read the related posts; 'Mobile CSS Page Width - etc' but haven't found a solution.

I've developed a mobile version of a website, and the width fills fine in Android, and Blackberry - but, for some reason in iPhone there remains extra space on the sides of the content, making the site render slightly smaller in content area and with more background. When a user double taps - it then, takes the full screen as it does in Android & Blackberry.

Any suggestions?

I've tried declaring the doc mobile, and using the '<meta name="viewport" content="width=device-width, initial-scale=1.0"> ' but it then zooms in the site way too much (Should I try toggling the 'initial-scale')?

I've tried the basics as well with setting to liquid etc.

Can't I use similar script, as I've used with Mobile Redirects to define how widths could render per device?

<!--Script for Mobile Redirect -->  

<script type="text/javascript">

var redirectagent = navigator.userAgent.toLowerCase();
var redirect_devices = ['vnd.wap.xhtml+xml', 'sony', 'symbian', 'nokia', 'samsung', 'mobile', 'windows ce', 'epoc', 'opera mini', 'nitro', 'j2me', 'midp-', 'cldc-', 'netfront', 'mot', 'up.browser', 'up.link', 'audiovox', 'blackberry', 'ericsson', 'panasonic', 'philips', 'sanyo', 'sharp', 'sie-', 'portalmmm', 'blazer', 'avantgo', 'danger', 'palm', 'series60', 'palmsource', 'pocketpc', 'smartphone', 'rover', 'ipaq', 'au-mic', 'alcatel', 'ericy', 'vodafone', 'wap1', 'wap2', 'teleca', 'playstation', 'lge', 'lg-', 'iphone', 'android', 'htc', 'dream', 'webos', 'bolt', 'nintendo'];
for (var i in redirect_devices) {
if (redirectagent.indexOf(redirect_devices[i]) != -1) {
location.replace("http://www.osmproduction.com/crown/maxbrooks/Test/MobileZombie/index.html");
}
}
</script>

<!--End Script for mobile Redirect -->  

Sub-question: Can anyone give me advice on best practices for optimizing for Blackberry - The page is rendering super zoomed in a certain Blackberry Model now (Don't recall Model, but 2007)- I'm assuming this discussion to take the width per device should tackle this issue as well, right? Or is developing for Blackberries somewhat of a separate issue? and something I'd have to look at sepa开发者_StackOverflow社区rately as they kind of suck for browsing?

---

Use <meta name="viewport" content="width=800"> where 800 is the amount of pixels that will fit your layout. By default iPhone uses 980, so if your page has a fixed width of 800px you would get 180px of blank space around it.

---

I use the following META-tag. It seems to work fine with my tests:

<META name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

This will scale to the width of the device, no matter what size it is.