Im trying to code a viewport recognizer.
Whenever a new user enters the site, the screen width is checked to give the user the matching navbar(mobile or pc). When its under 768px the device is classified as mobile Device,else it is a PC. The Data is then automatically input to a form with hidden inputs. To POST these Values to PHP i use a fetch statement with the Formdata from the Form and send it to a PHP file which does the following:
- it gets the Data from the Form using POST
- the data are if its the first load and if its mobile.
- it saves the data to session variables
- it converts the data into json
- it returns the array as i said i get this array with fetch and in my further javascript code i set the value of the textfields named "isFirstLoadHelper" and "isMobileMiddleManText" according to the json
to give the user the matching navbar, i just check the session variable isMobile, but however: on first load i get no navbar, at second load i always get the mobile navbar on every device. that is weird and i thought this is interesting lets ask it.
<?php
session_start();
?>
<script>
window.addEventListener("load", async function(){
if (typeof isMobileJSVar == "undefined" || isMobileJSVar == null){
function determineIfIsMobile(){
let screenWidth = screen.width;
let isMobileDevice;
//Verhindern des erneuten Formular Übermittlungs-Dialog
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
//Feststellen des Wievport WIdths
switch(screenWidth){
case (screenWidth <= 768) : isMobileDevice = true;
return isMobileDevice;
break;
case (screenWidth > 768) : isMobileDevice = false;
return isMobileDevice;
break;
default : isMobileDevice = false;
return isMobileDevice;
break;
}
}
//Elemente initialisieren
let isSubmitted = false;
let isMobileHelperURL = "./wp-content/themes/almondotheme/template_parts/outsourcedPHP/isMobileHelper.php";
let isMobileMiddleManTextElement = document.getElementById("isMobileMiddleManText");
let isFirstLoadHelperELement = document.getElementById("isFirstLoadHelper");
let mobileMiddleManFormElement = document.getElementById("mobileMiddleManForm");
let isUserMobile = determineIfIsMobile();
//Kommunikation mit PHP mittels Fetch
function isMobile(){
isMobileMiddleManTextElement.value = isUserMobile;
fetch(isMobileHelperURL,{
method: 'POST',
body: new FormData(document.getElementById('mobileMiddleManForm')),
})
.then(returnedisMobileJSON=>{
return returnedisMobileJSON.json();
})
.then(parsedisMobileJSON=>{
var setHelperInputsFunction= function() {
document.getElementById("isFirstLoadHelper").value = parsedisMobileJSON.isFirstLoad;
document.getElementById("isMobileMiddleManText").value = parsedisMobileJSON.isMobile;
}()
})
let isFirstLoadJSVar = document.getElementById("isFirstLoadHelper").value;
let isMobileJSVar = document.getElementById("isMobileMiddleManText").value;
alert(isMobileJSVar);
};
isMobile();
}
})
</script>
this is the php file fetch sends the formdata to:
<?php
session_start();
$isMobileArray = array();
if(isset($_SESSION["isFirstLoad"])){
$_SESSION["isFirstLoad"] = false;
$isMobileArray["isFirstLoad"] = $_SESSION["isFirstLoad"];
}
else{
$_SESSION["isFirstLoad"] = true;
$isMobileArray["isFirstLoad"] = $_SESSION["isFirstLoad"];
}
if(!(isset($isMobileArray["isMobile"]))){
$_SESSION["isMobile"] = $_POST["isMobileMiddleManText"];
$isMobileArray["isMobile"] = $_POST["isMobileMiddleManText"];
}
else{
$_SESSION["isMobile"] = $_POST["isMobileMiddleManText"];
$isMobileArray["isMobile"] = $_POST["isMobileMiddleManText"];
}
$JSONToReturn = json_encode($isMobileArray);
echo $JSONToReturn;
?>
on the navbar area of the site i just do
<?php
//Check ob Mobilgerät
if(isset($_SESSION["isMobile"])){
if ($_SESSION["isMobile"] == true){
get_template_part("./template_parts/navigation_mobile");
}
else{
get_template_part("./template_parts/navbar_pc.php");
}
}
else{
get_template_part("./template_parts/navbar_pc.php");
}
?>
but however on first load i get no navbar and on second load i always get the mobile navbar. Strange, isnt it?
Thank you for taking the time, I wish you a great sunday,
Your Alwin.