Question

现在我正在构建一个Web应用程序，我希望设备使用jquerymobile来获得780像素以下的分辨率，以及780像素以上的引导程序。这甚至可能吗？我试过四处寻找，我无法找到解决方案。我想使用两者的点点滴滴，问题是彼此之间存在很大的冲突...我不想建立两个独立的网站，因为这会破坏响应能力。

Twitter bootstrap：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>

Answer 1

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

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

Answer 2

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

之前我曾经使用过adap.js，它就像一个魅力。在没有真正将整个想法付诸实践的情况下，我不确定是否会出现任何javascript冲突。

祝你好运

Answer 3

您可以尝试仅在780px以上的分辨率中包含bootstrap 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，它通常需要一些标记，因此您无法仅通过媒体查询启用/禁用它

Answer 4

您还可以尝试我的jQuery Mobile Bootstrap主题：

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

它托管在Github上并确认可以使用当前版本的jQuery Mobile（1.2）。

一起使用jQueryMobile和bootstrap

4 个答案: