How to redirect mobile users from a desktop homepage to a mobile version

Question

Website is built with Elementor Pro and EasyWP. Website uses outdated plugin to redirect mobile users. Website will not be rebuilt with responsive design.

How do I implement a script to replace this outdated plugin?

Thus far, I've tried several other plugins with varying success. Generally, they function correctly when accessing the website with a Pixel 2XL (released 2017, 2880x1440 screen resolution), however do not work with newer phones (even with smaller screen resolutions).

This leads me to believe these plugins trigger redirects based on outdated browser types rather than screen resolution.

Answer 1

You can use this snippet in your desktop version. This will put the custom code in the footer of your theme and all mobile users will be redirected to the mobile version of your site. Just put this in functions.php of your theme to make it work

function custom_footer_script() {
    ?>
    <script>
      var loc = window.location;
      if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) &&
        loc.pathname.indexOf('/mobile-') === -1) {
           loc.href = loc.origin + '/mobile-' + loc.pathname.substr(1, loc.pathname.length);
      }
    </script>
    <?php
}
add_action( 'wp_footer', 'custom_footer_script' );