Modify wp_is_mobile() function to detect Android tablets

  • Resolved toad78

    (@toad78)


    8 years, 9 months ago

    I have a website that I’m using this code:

    <?php if ( !wp_is_mobile() ) { ?>
	<div id="header-image" style="background-image: url('<?php the_field('header_image'); ?>'); height: 530px; background-position: center <?php the_field('header_background_position'); ?> ">
</div>
	<main role="main">
	<?php } else { ?>
 		<main role="main" style="margin-top: 50px">
	<?php } ?>

    Now this works on hiding the <div id=”header-image”> from mobile phones and iPad/iMinis. But I have an Acer Android tablet and the <div id=”header-image”> does display, when it shouldn’t.

    How may I modify the function to include this tablet (and all other types) device?

    Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    wp_is_mobile() is not infallible. It depends on finding particular strings in the device browser’s user agent string, like “Mobile” or “Android”. If your Acer tablet’s browser uses a generic desktop user agent, detecting it this way will not be possible. You can find lists of the user agents of various browsers by searching.

    If there is something in the user agent that is unique to tablet browsers that you can identify, then you can use it to modify your conditional. Let’s say that unique string is “Tablet”. wp_is_mobile() does not pick up on this identifier, so modify your conditional like so:
    <?php if ( !wp_is_mobile() && strpos($_SERVER['HTTP_USER_AGENT'], 'Tablet') === false) { ?>

    Thread Starter toad78

    (@toad78)

    Okay. I’ll look into what type of agent it uses. But I’m curious if there is any online site that can tell you? For example, you can tell what your viewport size is by going to https://viewportsizes.com/mine/. Is there something similar to tell what kind of agent the tablet is using?

    It’s not a big deal, but I am curious if there is a quicker method.

    Moderator bcworkz

    (@bcworkz)

    There probably is, but I couldn’t point you to one easily. You could browse your own site, then check the access logs.

    You have your own server space, you could easily build your own page for this. Here’s the essential structure:

    <!DOCTYPE html>
<html lang="en-us">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>My User Agent</title>
</head>
<body>
<h1>MY User Agent</h1>
Your browser's user agent is:<br>
<?php
   print_r( $_SERVER['HTTP_USER_AGENT']);
?>
</body>
</html>

    Put this on it’s own .php page, upload to your server, then request the page in your tablet’s browser.

    Thread Starter toad78

    (@toad78)

    Thank you, bcworkz.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Modify wp_is_mobile() function to detect Android tablets’ is closed to new replies.