Even if you are using a responsive website design, sometimes you still need to tweak your styles or scripts on mobile devices. So is there an easy way to do this on a WordPress website?Well this might be the solution, a little trick that I came across recently, the WordPress conditional tag - wp_is_mobile(). This tag allows you to determine if a visitor is looking at your website on a mobile device such as a phone or tablet, using detection of the browser user agent string - ($_SERVER['HTTP_USER_AGENT']).Detection is for iPhone, iPad, Android, Silk, Kindle, Blackberry, Opera Mini and Opera Mobi. If you need to style your pages differently for mobile devices then using the wp_is_mobile() conditional tag along with css media queries enables this.Also if you feel like adapting the device targeting further you could setup your own function as is explained in this StackExchange article.
Using "wp_is_mobile"
Now how to target the mobile device, well if you only want to add something that happens on mobile devices, you could use the following inside a function that you would add to your functions.php file.if (wp_is_mobile()) {
//do something on a mobile device
}
As an example, perhaps you might want to disable the auto-detection of phone numbers on mobile devices, so you would want to add the meta format detection to the header of your page when shown on a mobile browser. The following function is for disabling the automatic detection of phone numbers in modern mobile browser.function add_to_header_mobile() {
if (wp_is_mobile()) {
?><meta name="format-detection" content="telephone=no"/><?php
}
}
add_action('wp_head','add_to_header_mobile');
If you are wondering how to add telephone numbers to a website that have a clickable link, when you have disabled the auto detection, then this link will help.
Adding a unique class for styling on mobile browsers
Another way that you could use the mobile detection would be to add a unique class name to the body class of your pages, that only appears when viewed on the mobile device.function add_is_mobile_bodyclass($classes) {
//adds a class of "wp_is_mobile" to the body class of the page
if (wp_is_mobile()) {
$classes[] = 'wp_is_mobile';
}
return $classes;
}
add_filter('body_class','add_is_mobile_bodyclass');
Then you would use the class name "wp_is_mobile" in your css file to target mobile devices. An example could be that on mobiles you want to change the colour of page titles, so it might look something like this:.wp_is_mobile h1.pagetitle-title { color: #697FB4; }
And if you have a responsive design theme, then you could use the wp_is_mobile class with your css media queries to target tablets and mobile phones differently.
Using the mobile browser detection in jQuery and Javascript
Having a wp_is_mobile class added to the body classes when displayed on a mobile device, means that you could also use this to detect whether to add a particular javascript or jQuery to the page.jQuery(document).ready(function($) {
if ($("body").hasClass("wp_is_mobile")) {
//do something if mobile device detected
}
else {
//do something else
}
});
Now you have a new tool at your disposal for making your web pages more mobile friendly. What other tips do you use for optimising your WordPress website for mobile devices?
Comments: