0

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

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

我从 Bootstrap 开始（大量追随者，经常更新），但在移动设备上测试时遇到了问题。

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

然后我让我的朋友试穿他的三星 GT I9000 Galaxy S，它已经坏了。

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

下一张图片来自 Adob​​e 设备管理器，这是我朋友手机上的样子：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 在他们的文档上没有这个问题，所以一定是我错过的东西/做错了。

4

1 回答 1

0

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

* {
    box-sizing: border-box;
}

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

在 <= iOS4 和 Android <= 2.3 上，这需要以 为前缀-webkit-，如果不是，它会像通常那样计算填充（在我的情况下，使宽度变大 - 将其推出视口）。

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

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

于 2012-07-19T10:38:05.983 回答