Using jQueryMobile AND bootstrap together
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>
Answer
You can't simply switch to jQM from Bootstrap (or the opposite) on window resize without sending the user to a different page all together due to the differences in markup javascript and css between the two libraries. You could however have bootstrap display a button for the lower resolution screens that will take them to the jQM version of your site.
Another option is on page load, check device width and do a redirect.