I was tasked to build a script to have the ability for a user to switch back and forth between mobile and desktop versions of a website. All styles are working fine using media queries (size-wise) however, when the ink is implemented on mobile, (it is hidden on desktop via hidden dive after browser size check) it switches to the desktop version fine, but when the user clicks on the link to get back to "mobile" version it takes two tries before it renders the mobile style sheet. here is my code.
<?php //get the users choice and start or kill the session
$getWidth = $_GET["getWidth"];
if ($getWidth == "all"){
session_destroy();
} else if ($getWidth == "desktop") {
session_start();
$_SESSION['desktop'] = "1";
}
//get the current working page so the user comes back to where they were
function curPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}
//Change the div ID so the users either sees one link or the other
if(isset($_SESSION['desktop'])) {
$divID = "switchtodesktop";
} else {
$divID = "switchtomobile";
}
?>
The css page:
<?php
if(isset($_SESSION['desktop'])) {
?>
<link href='<?php echo $path;?>css/desktop.css' rel="stylesheet" type="text/css">
<?php } else { ?>
<link href='<?php echo $path;?>css/mq.css' rel="stylesheet" type="text/css">
<?php } ?>
The Div that contains the link on all pages:
<div id='<?php echo $divID;?>'>
<?php
if(isset($_SESSION['desktop'])) {
?>
<a href='<?php echo $pageURL;?>?getWidth=all'>SWITCH TO MOBILE VIEW</a>
<?php } else { ?>
<a href='<?php echo $pageURL;?>?getWidth=desktop'>SWITCH TO DESKTOP VIEW</a>
<?php } ?>
</div>
I am pulling my hair out trying to get this to come back on 1 click!
Any help is GREATLY appreciated.
Thanks.