Question

I recently have been working on a pilot mobile website for the company I work for. After performing a small alpha test, I came across several width issues for blackberries and iphones.

When you access my mobile site on a blackberry bold or an iphone, the width container is ending maybe 5-10% shy of the overall width of the view. On a blackberry curve, the container gets cut at maybe 50-60% of the overall width except for the speaker images on the homepage.

Here is the site:
http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/home.html

I originally found this line of code to help resizing on an ipad, but have had no luck with blackberry/iphone specific issues.

  <meta name="viewport" content="user-scalable=no, width=device-width" />

Just as a sidenote, I haven’t experienced any width issues on any android devices.

Please help! And let me know if I can provide anymore information!

Answer 1

try this:

<meta name="viewport" content="width=device-width, maximum-scale=1">

EDIT:

After further review, it looks like the issue is with the style on .bottom – it has a width of 100%, but a padding of 10px, so it will be 20px larger than the screen.

I also noticed there’s a white bar below your content on the page, I assume you don’t want that. It’s fixed in the .container style below.

Here’s an easy fix for that. Just replace the following styles:

.bottom {
    background:#2D3192;
    width:100%;
}
.bottom p {
    font-size:.70em;
    color:#FFF;
    font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
    font-weight:400;
    padding: 10px;
}
.container {
    width:100%;
    padding-top: 10px;
    background:url(http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/P1656_mobileBG.jpg) repeat-x #FFF;
    margin:0;
    top:0;
}

I left the old blocks in so you’ll be able to just swap them out with your current ones.

Oh, and you can also change your meta back to:

 <meta name="viewport" content="user-scalable=no, width=device-width" />

Hope that helps!