简单的引导页面在 iPhone 上没有响应答案

【问题标题】：Simple Bootstrap page is not responsive on the iPhone简单的引导页面在 iPhone 上没有响应
【发布时间】：2012-03-12 06:53:16
【问题描述】：

我下载了 Twitter Bootstrap 示例并用它创建了一个简单的 rails 项目。我在需要的地方复制了css，它显示得很好。我还复制了 js，一切都在我的桌面上运行良好：当我更改浏览器的大小时，它会重新组织页面。当使用一些不同大小的“响应式设计测试工具”时，效果很好。

我遇到的问题是在我的 iPhone 上：它的显示方式和我的桌面上一样。

当我尝试 Bootstrap Hero 示例页面（这是我开始时的页面）时，它在我的 iPhone 上运行良好。

会出什么问题？我几乎没有接触任何 CSS，我只是在页脚上添加了一个填充。

仅供参考，我更改的 CSS 是将我的应用程序链接到 application.css，内容如下：

/* Application stylesheet */

@import url(bootstrap.css);
@import url(bootstrap-responsive.css);

/* Body */
body {
    padding-top: 60px;
    padding-bottom: 40px;   
}   

/* Footer */
footer {
    padding: 20px 0;
}

【问题讨论】：

可以发个测试页或者一些代码吗？
它对我很敏感。为什么你认为它没有响应？
@RaySF 我看不出它为什么不能工作的原因，尽管我对你使用的@import 规则有一些疑虑，但那是个人的。可以发个测试用例吗？
@JesseWolgamott 它在我的 iphone 上没有响应，当我打开上面提到的两个页面时，官方示例工作正常（例如，菜单显示不一样）但我的页面显示就像在桌面上一样。
@RaySF 由于我工作的性质，我不得不研究提高兼容性和提高使用@import 表示法堆叠的超大样式表的性能的方法。在此过程中，我发现由于该技术导致了许多问题，并发现存在 biiig 性能下降（以及许多无法解释的错误），后来通过使用 html <link> 标签附加样式表来修复这些问题.后来在 SO 中得到this 等问题的支持。

标签： twitter-bootstrap responsive-design

【解决方案1】：

确保添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

致您的<head>。

我遇到了类似的问题，我错误地认为这只是视口宽度的问题。

更新：查看@NicolasBADIA 答案以获得更完整的版本。

【讨论】：

还有这个，让纵向和横向视图都工作：
@virtualeyes，感谢您的提示！知道如何允许用户缩放并使横向视图正常工作吗？
不，我使用 JQuery 移动设备，而不是响应式设计的忠实信徒。让移动设备成为移动设备，平板电脑及更高版本成为桌面设备。介于两者之间的任何东西，不要在意;-)

【解决方案2】：

frntk提出的代码在横屏时不起作用，virtualeyes给出的解决方案是不正确的，因为它使用分号而不是逗号。这是正确的代码：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

来源：https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

【讨论】：

Twitter Bootstrap 官方网站中的示例应更新以使用此功能。
很好的通知，谢谢！屏幕转动有类似问题，现在就像一个魅力。
这应该是公认的答案！

【解决方案3】：

当然，这是一个非常小的边缘案例，但值得一提。

如果您通过 DNS 提供商使用域转发，您的网站最终可能会被封装在 iframe 中。例如，如果您要屏蔽域和转发，GoDaddy 就可以使用此技术。

【讨论】：

我花了几个小时试图解决这个问题，最终发现了这个评论。谢谢！
这条评论会让一小群人非常非常高兴。
我没有看到 iframe 被包裹起来，但是在使用正确的元标记时遇到了这个问题，他们可以隐藏 iframe 吗？

【解决方案4】：

我被这个问题困扰了好几个小时。

别忘了将内容放在<div class="container-fluid">...</div>中

【讨论】：