Bootstrap responsive 2 无法在移动设备上加载答案

【问题标题】：Bootstrap responsive 2 does not load on mobile devicesBootstrap responsive 2 无法在移动设备上加载
【发布时间】：2013-12-27 16:57:06
【问题描述】：

我有一个基于 Bootstrap ver2 css 框架的响应式 WP 主题。一切都在桌面上运行：如果测试不同大小（针对不同的媒体查询）没问题。但是，如果我在手机上进行测试，则不会加载媒体查询。可能是什么问题。

网站链接：http://moldovan.szanto-zoltan.com/

p.s.：标题包含此内容以适应设备宽度

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

【问题讨论】：

标签： wordpress google-chrome twitter-bootstrap firefox responsive-design

【解决方案1】：

通过 Bootstrap 2 的文档

Bootstrap 目前默认不包含响应式功能因为并非所有事情都需要响应。而不是鼓励开发人员要删除此功能，我们认为最好将其启用为需要。

如何启用响应式功能

通过包含适当的元数据在您的项目中启用响应式 CSS 文档的 <head> 中的标记和附加样式表。如果你已经从定制页面编译了 Bootstrap，你只需要包括元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

如果你没有从自定义页面编译 Bootstrap，这里是怎么做的

使用编译好的响应式版本，bootstrap-responsive.css
添加@import "responsive.less" 并重新编译Bootstrap
将 responsive.less 修改并重新编译为单独的文件

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

有关更多信息，请阅读documentation。我希望这个解决方案能帮到你。

建议

我认为最好的解决方案是使用 bootstrap 3，它会正常工作

在您的标题页中添加这些元数据以告诉浏览器禁用缩放。然后 CSS @media 选择器按预期工作：

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">

来自question的建议

【讨论】：

嗨，我认为最好的解决方案是使用 bootstrap 3 它会正常工作
在桌面 Firefox/Chrome 上工作（即使我将浏览器宽度更改为移动宽度）当我在 android 浏览器中查看页面时出现问题（如果我在 android 上安装 Firefox 工作正常）或在 iOS Safari 上。有什么想法吗？
仍然没有运气，但现在我注意到在 Safari 中不起作用（甚至不是桌面版本，但在 chrome 和 ff 上效果很好）
如果您在responsinator 中测试它，您的网站看起来不错，所以我认为问题出在 Bootstrap 2 和浏览器的手机上，我真的很抱歉。希望你能找到解决办法
我发现了一些东西，如果我将容器类更改为 container-fluid 它可以工作，只是容器没有居中。我认为这可能是问题