Twitter Bootstrap 导航可以在桌面上工作，但不能在移动设备上工作答案

【问题标题】：Twitter Bootstrap navigation working on desktop but not mobileTwitter Bootstrap 导航可以在桌面上工作，但不能在移动设备上工作
【发布时间】：2012-06-14 09:36:55
【问题描述】：

我正在使用 Twitter Bootstrap 中的折叠导航菜单，如下所示：http://twitter.github.com/bootstrap/examples/starter-template.html

当我通过调整浏览器窗口的大小在桌面上的浏览器中对其进行测试时，它工作正常，但在我的移动设备（iPhone 4s）上测试它时没有任何反应。

上面来自 Bootstrap 的示例页面可以在我的手机上运行，所以我一直在比较两者，无法弄清楚是什么导致它无法触发。

以前有人遇到过这个问题吗？

【问题讨论】：

折叠菜单的链接是twitter.github.com/bootstrap/javascript.html#collapse
你能在 jsFiddle 中提供代码吗？
我会尝试在 jsFiddle - 大型网站上获取它。它在同事的 Android 手机上运行良好。仍然没有在我的 iPhone 上触发，调试控制台中也没有错误。
如果它适用于安卓系统，您可以尝试清除缓存：在主屏幕中，选择设置 > Safari。点击清除缓存。
@Steph 你有没有想过这个问题 - 有同样的问题它正在摧毁我！

标签： jquery html css twitter-bootstrap responsive-design

【解决方案1】：

标签式导航也有同样的问题。

在台式机上工作正常，但我一去 iphone/ipad - 就死了。

它只是让#page-name 出现在 URL 中。

但我错过了一个技巧 - 我忘了添加这个......

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})

Boom 选项卡现在可以在 iphone/ipad 上使用

【讨论】：

【解决方案2】：

我将引导代码更新到 2.3.0 版，移动设备开始运行良好。

【讨论】：

【解决方案3】：

我记得遇到过同样的问题。无论如何，这就是我所做的。

将以下内容放在 head 部分。

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

希望这会有所帮助。

【讨论】：

这对我不起作用。还有其他可以应用的元素吗？导航栏适合设备，但所有内容大约是屏幕宽度的两倍。我正在使用 Twitter Bootstrap。