How to display different blocks for mobile and desktops

Question

I want to display a fixed banner from the bottom left of the screen. But at the same time, the banner is different for desktops and mobile devices.

Please tell me. How can I determine the user's device? For this, can I use the wp_is_mobile function? As I understand it, wp_is_mobile identifies the device by the user agent of the browser.

PHP code is very simple. Something like the following?

<?php if (wp_is_mobile()):?>

<div class="mobile_banner"><img src="mobile.png"></div>

<?php else:?><div class="desktop_banner"><img src="desktop.png"></div><?php endif?>

Is this the correct way to determine the user's device?

There is another if_is_mobile function. Please advise me. Confused a little bit.

Answer 1

You're using the right function to detect the current user agent, otherwise there is another php library you can solicit called : Mobile-detect which help to detect the user agent device and the OS as well : https://github.com/serbanghita/Mobile-Detect

Mobile_Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.

And they have already an existing plugin for wordpress : https://wordpress.org/plugins/tinywp-mobile-detect/

Mobile Detect for WordPress - WordPress has a built-in function (wp_is_mobile()) to detect mobile devices. There is (at least) one catch, though. It considers iPad (iPad pro, and any tablet) as a mobile. So, this 3rd party module changes the way wp_is_mobile() works with the help of Mobile Detect PHP library! Made by Pothi Kalimuthu