我最近一直在为我工作的公司开发一个试用移动网站。在进行小型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设备上都没有遇到任何宽度问题。
请帮忙!如果我能提供更多信息,请告诉我!
答案 0 :(得分:1)
试试这个:
<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" />
希望有所帮助!