0

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:

  1. it gets the Data from the Form using POST
  2. the data are if its the first load and if its mobile.
  3. it saves the data to session variables
  4. it converts the data into json
  5. 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.

  • When you page loads initially any php logic will have been completed before the browser sees the page so any size information done by javascript will be done after the initial load. When the page is loaded then the js will get a chance to do things. It might be better using `media queries` initially ( or wholly) and falling back to js when the initial load is done?! – Professor Abronsius Feb 19 '23 at 13:55
  • Wouldn't it be better to save the cookie with the resolution information with javascript and read it in both javascript and php? – Robert Feb 19 '23 at 14:02
  • Thank you I will try to do it with cookies. – Alwin Schneider Feb 19 '23 at 14:34

0 Answers0