wp_is_mobile is a trap waiting to bite you, just avoid it

What can be wrong with a function that just checks the user agent to determine if the user is on a mobile device like wp_is_mobile? even if the function works as promised the whole idea of using the user agent to detect the type of device on server side is wrong.

Using that function (or any server side detection really, but I focus on wordpress here) violates the core principal of responsive design, that you serve the same HTML to all users.

In practice you will run into trouble once you will want to cache your HTML and then you will start to sometimes get the mobile version of the site on desktop and vice versa. The “nice” thing here is that by that time the original developer had moved on and there will be someone new that the site owner will have to recruit in order to fix the resulting mess. Pros just don’t do that to client.

What is the alternative? Detect whatever needs to be detected using javascript at client side and set a class on the body element. What about people that turn off JS? I say fuck the luddites, let them have a desktop version on their mobile. OK, strike that, make your CSS mobile friendly as much as possible just don’t worry about the UX of the luddites.

3 thoughts on “wp_is_mobile is a trap waiting to bite you, just avoid it”

  1. In general, I agree – now – because wp_is_mobile() is giving me the caching issue that you are talking about. However, toggling classes in general is no longer good practice. Buzzword: data-*.

    1. Toby, obviously this is only if you just must detect the browser in the first place, something that you should avoid in general, but sometimes you have to do that (show different image for iphone and android as part of some help related page).

  2. I’d love to discuss this topic further you, but digging deeper to this in the comment section is rather impolite I guess. Your article was my island on the lost sea of caching issues. Cheers :)

Leave a Reply

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