Simple Mobile Browser Detection using Javascript

In earlier post about wp_is_mobile() I explain that we can use wp_is_mobile() WordPress function to design theme by adding wp-is-mobile body class and use it in CSS and Javascript/jQuery.

But @samikeijonen mention that similar method was removed from twenty fourteen theme because if we use page cache/html cache the result will also be cached.

 

 

responsive

So I think the best way to use wp_is_mobile() is to also detect mobile browser via javascript/jQuery using this simple code:

    /* Detect mobile browser */
    if( navigator.userAgent.match(/Mobile/i)
        || navigator.userAgent.match(/Android/i)
        || navigator.userAgent.match(/Silk/i)
        || navigator.userAgent.match(/Kindle/i)
        || navigator.userAgent.match(/BlackBerry/i)
        || navigator.userAgent.match(/Opera Mini/i)
        || navigator.userAgent.match(/Opera Mobi/i) ){
        $("body").removeClass("wp-is-not-mobile").addClass("wp-is-mobile");
    }
    else {
        $("body").removeClass("wp-is-mobile").addClass("wp-is-not-mobile");
    }

The code above check the same user agent string used in wp_is_mobile().

Leave a Reply

Your email address will not be published. Required fields are marked *