I am trying to detect mobile devices and send them to a different directory on my server. The desktop version of the website is a WordPress website; the mobile version is HTML. At the moment, the mobile website only loads if I refresh the page. The first load seems to come from the browser cache but this issue persists even after I clear the browser cache.
I am using this Mobile-detect library mobile detect library to detect if the device requesting the page is mobile and redirecting the visitor with PHP header(Location: ...).
In the root of my server, I've got:
// website structure for mywebsite.com
/public_html
/lib
/mobile-detect.php // the mobile detect 3rd-party library
/m // the mobile website version
/index.html
/index.html.bak.bak
/wp-admin
/wp-content
/themes/
my-child-theme/
/wp-includes
etc...
Inside the header.php file in my child theme, I've tried the following:
<?PHP
// at the top of the page
require_once 'lib/mobile_detect.php';
$detect = new Mobile_Detect;
if ( $detect->isMobile() ) {
header('Location: https://mywebsite.com/m/');
exit;
}
?>
I tried expanding that with more directives related to caching:
<?PHP
// at the top of the page
header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate"); //from amclin
require_once 'lib/mobile_detect.php';
$detect = new Mobile_Detect;
if ( $detect->isMobile() ) {
header('Location: https://mywebsite.com/m/');
exit;
}
?>
I've tried adding meta tags to the <head> of the document after the PHP code:
<meta http-equiv=“Expires” content=”-1″>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
And I've tried using Javascript in addition to all the rest of it:
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "https://mywebsite.com/m/";
}
</script>
The original example from the 3rd party mobile-detect library recommended using Cookies here but I have to admit, I didn't understand the logic of it. I tried it originally but had the same issue:
<?php
@include('lib/mobile_detect.php');
$detect = new Mobile_Detect();
if ($detect->isMobile() && isset($_COOKIE['mobile'])) {
$detect = false;
}
elseif ($detect->isMobile()) {
header('Location:https://mywebsite.com/m/');
}
?>
The index.html page inside public_html/m/ contains this:
<?php
setcookie('mobile','m',time()+3600,'/','mywebsite.com/');
echo @file_get_contents('index.html.bak.bak');
I also tried adding caching directives to this file:
I also tried using wp_redirect in place of header():
<?PHP
// at the top of the page
require_once 'lib/mobile_detect.php';
$detect = new Mobile_Detect;
if ( $detect->isMobile() ) {
wp_redirect('Location: https://mywebsite.com/m/');
exit;
}
?>
The WP site uses Clearfy Caching plugin. I've cleared the cache on that time and again.
So I'm clearly working at the wrong level for this and am curious what's going on here.
Why is the browser getting the desktop version first and then, after refreshing the page, going to the server and getting a fresh header.php file? Is this code in the wrong place? Should it be in an index file somewhere else? Do I need to use cookies for this? Aggghhhh!
Thanks for your help on this!
