Question

I need to know how to do this.

Right now it is loading pages into the same page when I am not on a phone(handheld) device.
Thus, I will need some conditions to be tested, same as the media query’s.
for example: test if some element is hidden and only then invoke the plugin

I don’t know if this would work better then a page redirect, but I will have to see?

How can I do that?

jquery mobile is only needed for small screen usage( handhelds). The media query’s work ok.
The way I set it up is that it hides everything on the page and shows only the mobile part.

@media screen and (max-width: 555px),
screen and (max-device-width: 480px)
{ 
#wrap,#footer,#masker{display:none;}
#p-mobi{ display:block;}
}

and

<div data-role="page" id="p-mobi">

</div>

thanks, Richard

Answer 1

There are few available options.

According to your needs this one should be the best one:

1. https://github.com/borismus/device.js

   This is completely client side detection, no need for custom js scripting just use this custom link tag and match it to the desired device size.

   For example:

   <link rel="alternate" href="http://foo.com" id="desktop" media="only screen and (touch-enabled: 0)">
   <link rel="alternate" href="http://m.foo.com" id="phone" media="only screen and (max-device-width: 640px)">
   <link rel="alternate" href="http://tablet.foo.com" id="tablet" media="only screen and (min-device-width: 641px)">
   

   More can be found here: https://github.com/borismus/device.js

2. Or use this script to detect a browser type and then use this js loader to decide which js file should be used.

   Example:

   yepnope({
       test : Modernizr.geolocation,
       yep  : 'normal.js',
       nope : ['polyfill.js', 'wrapper.js']
   });
   

   One more thing yephope.js is not out of the box compatible with jQuery so you will need to do a little fix.

My advice, stick with the option 1.