我最近一直在为我工作的公司开发一个移动试点网站。在执行了一个小的alpha测试之后,我遇到了黑莓和iPhone的几个宽度问题。

当您使用黑莓黑体或iPhone访问我的移动网站时,宽度容器的结尾可能比视图的整体宽度小5-10%。在黑莓曲线上,除主页上的扬声器图像外,容器的切割宽度可能约为总宽度的50-60%。

这是网站:
http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/home.html

我最初发现这行代码可帮助调整ipad的大小,但是对于黑莓/ iphone特定的问题并没有运气。

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


就像一个旁注,我在任何android设备上都没有遇到宽度问题。

请帮忙!并让我知道是否可以提供更多信息!

最佳答案

尝试这个:

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


编辑:

经过进一步审查,看来问题出在.bottom上的样式上-宽度为100%,但是填充为10px,因此它将比屏幕大20px。

我还注意到页面上的内容下方有一个白色的栏,我想您不想要那样。它在下面的.container样式中已修复。

这是一个简单的解决方法。只需替换以下样式:

.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;
}


我把旧的块留了下来,这样您就可以将它们与当前的块换掉。

哦,您还可以将您的元更改回:

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


希望有帮助!

07-24 09:44
查看更多