Websupporter

Just another Websupporter site

Of what use is wp_is_mobile() in times of responsive web design?

Today, I want to discuss a function in WordPress which some might believe is outdated: wp_is_mobile() (to be found in wp-includes/vars.php). This function detects whether a mobile device is used or not by using the user agent of the browser. What? In times of responsive web design? Five years after Ethan Marcottes legendary article about responsive web design?

Usage in the WordPress Core

And still, aren’t there uses where we need to know on the PHP level if a user visits the site is using a mobile device? Let’s have a look into the WordPress Core first and see, how the function is used there.

The admin bar

When WordPress renders the admin bar, it checks by using wp_is_mobile() if a mobile device is used. In this case, the class .mobile will be attached to the bar (see wp-includes/class-wp-admin-bar.php), although, if I am not mistaken, there are no additional styles attached to this class. Also the body-Tag in the admin gets extended by the .mobile class, which changes the behavior of the menu for example.

The editor

The WordPress editor in mobile view
The WordPress editor in mobile view

Most people will write their blog posts usually in the WYSIWYG mode. At least, they have the possibility. But not, if they use mobile devices. In this case the function user_can_richedit() (wp-includes/general-template.php) will return false and what remains is the text mode. The “Visual”-Tab, which you usually find on the top right disappears as well as the full screen button.

More uses

Furthermore, you will find this function is used by _device_can_upload(). But here it plays a minor role. WordPress uses this boolean also to pass it to Javascript, for example in the Customizer.

How works wp_is_mobile()?

The basic is very simple. It checks whether the user agent of the browser contains one of the following text strings: “Mobile”, “Android”, “Silk/”, “Kindle”, “BlackBerry”, “Opera Mini” or “Opera Mobi”. In this case, the function will return true otherwiese false. With these seven strings all major mobile browsers are detected, which lets this function work pretty accurate. Of course it can always happen, a user changes his user agent individually and is not detected correctly. But, these cases aside, wp_is_mobile() works quite well in detecting mobile devices.

More interesting use cases

Since the last mobile update by Google the topic is back again. Mobile devices take more time to render pages and in most cases the internet connection is slower than for desktop devices. All this is bad for the user experience. If you develop your site mainly for desktop, using heavy sliders and much more, for mobile users this results in a catastrophe. Not only many sliders are not as mobile as one wishes them to be, especially the loading times are horrible. This results in high bounce rates. So, why don’t you stop the output of sliders and other heavy features on mobile devices by using wp_is_mobile()?

Another nice feature, you could easily realize with wp_is_mobile()? You could add an additional feature for mobile devices. In many cases the top of the page has a bar with the contact details. Why not checking if the device is mobile and add a SMS button to this bar?

Conclusion

Even the WordPress Core is still using a function which looks a bit outdated right now. And I tried to present two small examples, where I think checking the device on the PHP level would be more efficient than using CSS. If you have other use cases for this function or you have another opinion about the function, I am always happy about comments. 🙂

About the author

Seine erste Webseite hat David Remer 1998 in HTML verfasst. Wenig später war er fasziniert von DHTML und JavaScript. Nach jahrelanger Freelancerei arbeitete er zunächst für Inpsyde und ist heute Entwickler bei Automattic. Außerdem hat er das Buch "WordPress für Entwickler" verfasst.

Leave a Reply

Your email address will not be published.