移动缩放宽度的错误响应设计

Question

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

---

我正在测试与不同的响应网格框架，我将在未来将我的网站集成到水域。

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

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

然后，我问我的朋友尝试他的三星GT I9000银河S，它很坏。

---

这第一个图像是如何看起来用iPhone/iPad /浏览器窗口： http://imgur.com/o3cVX

下一个图像是从Adobe设备管理器，这是怎么看我的朋友的电话： 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发布，因此并不需要前缀。

在< = iOS4的和Android < = 2.3这需要与-webkit-前缀，如果它不是，它计算填充，因为它通常会（在我的情况下作出的宽度大 - 推出视口的）。

这里的源：http://paulirish.com/2012/box-sizing-border-box-ftw/

希望这可以帮助别人，如果他们有同样的问题。