JQuery and/or JavaScript have no native mechanism to determine whether a page is loaded on a mobile phone or not. However, CSS media queries offer this capability. I found the following nice trick on stackoverflow to utilize media queries to help JS/JQuery applications to determine whether they run in a mobile.
First, insert an arbitrary div somewhere in the body of your HTML document such as:
<div id=”mobileDetector”></div>
Then, add the following CSS:
@media only screen and (max-width: 480px) { #mobileDetector { display: none; } }
(Note: You can also use the width 767px or so to also capture tablets).
Finally, the following JQuery function can be used to determine if on a mobile or not:
(function($) { $.isMobile = function() { return $('#mobileDetector').css('display') === 'none'; } }) (jQuery);