移动网站上的 Iphone 和 Blackberry 特定宽度问题

Question

我最近一直在为我工作的公司开发一个试点移动网站。在进行了一次小型 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 设备上都没有遇到过任何宽度问题。

请帮忙！如果我能提供更多信息，请告诉我！

Answer 1

试试这个：

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

编辑：

经过进一步审查，问题似乎出在 .bottom 上的样式上 - 它的宽度为 100%，但内边距为 10 像素，因此它将比屏幕大 20 像素。

我还注意到页面上您的内容下方有一个白条，我想您不希望这样。它在下面的.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" />

希望有帮助！