2

Right now I'm building a web app, and I would like the device to use jquerymobile for resolutions under 780 pixels, and bootstrap for above 780 pixels.. Is this even possible? I've tried searching around and I can't figure out a solution. I would like to use bits and pieces of both, the problem is this strongly conflict with each other... I don't want to build two separate sites because that would ruin the responsiveness.

Twitter bootstrap: http://twitter.github.com/bootstrap/
jQueryMobile: http://jquerymobile.com

Here's my head... 

<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>
4

4 回答 4

2

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

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

于 2013-01-09T15:36:37.583 回答
1

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

我以前单独使用过 adapt.js，它就像一个魅力。如果没有实际对整个想法进行测试，我不确定是否会有任何 javascript 冲突。

祝你好运

于 2013-01-10T02:36:01.910 回答
0

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

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

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

于 2013-02-08T02:41:15.580 回答
0

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

于 2013-01-09T15:31:11.837 回答