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.
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()
.