Question

编辑：找到答案，请参阅下面的答案。

我正在使用不同的响应式网格框架测试水域，我将来会整合到我的网站中。

我开始使用Bootstrap（大量关注，经常更新），但在移动设备上测试时遇到了问题。

首先我通过http://screenqueri.es尝试了 - 一切看起来都很好，然后在我的iPhone / iPad上试了一遍 - 一切看起来都不错。

然后我让我的朋友尝试他的三星GT I9000 Galaxy S而且它很破旧。

第一张图片是它在iPhone / iPad /浏览器窗口中的外观： http://imgur.com/o3cVX

下一张图片来自Adobe Device Manager，这是我在朋友手机上看到的样子： http://imgur.com/kd47G

请注意顶部的规则（在帮助按钮下）是如何保持在屏幕的约束范围内的，但下面的框似乎在屏幕上显示出来。

我正在使用<meta name="viewport" content="width=device-width, initial-scale=1.0">来确保设备正确呈现页面。

这是我的HTML：

<div class="container">
    <div class="row-fluid>
        <div class="span9></div>
        <div class="span3>Help button is here</div>
    </div>
    <div class="row-fluid>
        <div class="span6></div>
        <div class="span6></div>
    </div> 
</div>

CSS只是：http://twitter.github.com/bootstrap/assets/css/bootstrap.css + http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

页面的两个部分编写完全相同，但显示方式不同。

具体可以使用固定宽度来解决这个问题，但我宁愿有适合所有设备的东西 - 我也注意到Bootstrap在他们的文档中没有这个问题，所以一定是我的东西我失踪/做错了。

Answer 1

我发现了问题 - 盒子正在使用：

* {
    box-sizing: border-box;
}

我的测试平台是iOS5和最新的Chrome版本，所以不需要前缀。

On＆lt; = iOS4和Android＆lt; = 2.3这需要以-webkit-为前缀，如果不是，它会像往常一样计算填充（在我的情况下，使宽度更大） - 将其推出视口。）

以下是来源：http://paulirish.com/2012/box-sizing-border-box-ftw/

如果他们遇到同样的问题，希望能帮到别人。

移动缩放宽度的响应式设计不正确

1 个答案: