一起使用 jQueryMobile 和引导程序答案

【问题标题】：Using jQueryMobile AND bootstrap together一起使用 jQueryMobile 和引导程序
【发布时间】：2013-01-09 15:14:16
【问题描述】：

现在我正在构建一个网络应用程序，我希望设备使用 jquerymobile 来获得 780 像素以下的分辨率，并使用引导程序来获得 780 像素以上的分辨率。这甚至可能吗？我试过四处寻找，但找不到解决方案。我想使用两者的点点滴滴，问题是这种强烈的相互冲突......我不想建立两个单独的网站，因为这会破坏响应能力。

Twitter 引导程序：http://twitter.github.com/bootstrap/
jQueryMobile：http://jquerymobile.com

这是我的头......

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php echo Asset::js('jquery.js'); ?>
    <?php echo Asset::css('bootstrap.min.css'); ?>
    <?php echo Asset::js('bootstrap.min.js'); ?>
    <?php echo Asset::css('bootstrap-responsive.css'); ?>
</head>

【问题讨论】：

标签： jquery jquery-mobile twitter-bootstrap responsive-design fuelphp

【解决方案1】：

由于两个库之间标记 javascript 和 css 的差异，您不能简单地在窗口调整大小时从 Bootstrap（或相反）切换到 jQM，而不会将用户一起发送到不同的页面。但是，您可以让引导程序显示一个用于较低分辨率屏幕的按钮，将它们带到您网站的 jQM 版本。

另一个选项是页面加载，检查设备宽度并进行重定向。

【讨论】：

如果屏幕尺寸太小，是否有可能破坏引导链接？这只适用于初始负载，还是动态工作？
打破它是什么意思？另外，您是否知道 bootstrap 有一个响应式样式表，使其在移动设备中运行良好？如果您正确设置结构，它会自动调整文档大小及其结构以最适合当前屏幕尺寸。

【解决方案2】：

Adapt.js 可能适合您。它是一个轻量级的 JavaScript，它检查你的窗口宽度，然后提供适当的 CSS。理论上，您为 780 以下的窗口宽度和 780 以上的引导程序指定 jquerymobile css。

我以前单独使用过 adapt.js，它的作用就像一个魅力。如果没有真正将整个想法付诸实践，我不确定是否会有任何 javascript 冲突。

祝你好运

【讨论】：

【解决方案3】：

您可以尝试仅针对超过 780 像素的分辨率包含引导 css

<link href="bootstrap.min.css" rel="stylesheet" media="only screen and (min-width:780px)">
<link href="bootstrap-responsive.css" rel="stylesheet" media="only screen and (min-width:780px)">

至于 jqueryMobile，它通常需要一些标记，因此您无法仅使用媒体查询来启用/禁用它

【讨论】：

【解决方案4】：

你也可以试试我的 jQuery Mobile Bootstrap 主题：

https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme

它托管在 Github 上，并确认可以与当前版本的 jQuery Mobile (1.2) 一起使用。

【讨论】：