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

【问题标题】：Responsive design on mobile scaling width incorrectly移动缩放宽度的响应式设计不正确
【发布时间】：2013-12-29 12:04:39
【问题描述】：

编辑：找到了答案，请看下面我的答案。

我正在使用不同的响应式网格框架进行测试，将来我会将这些框架集成到我的网站中。

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

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

然后我让我的朋友试穿他的三星 GT I9000 Galaxy 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 在他们的文档中没有这个问题，所以一定是我的东西我错过/做错了。

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

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

* {
    box-sizing: border-box;
}

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

在 -webkit- 为前缀，如果不是，它会像往常一样计算填充（在我的情况下，使宽度变大 - 将其推出视口） .

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

希望对遇到同样问题的人有所帮助。

【讨论】：