PHP Variable Is Not Changing Even I Change It

Question

I have written code to get the document resolution for a mobile screen resolution check. An event listener checks client width and if resolution <= 768 php var should becomes true else false.

<script>
                        window.addEventListener("resize", function (e){
                        var width = document.body.clientWidth;
                        console.log(document.body.clientWidth);
                        if (width <= 768) {<?php $mobileScreenRes = true; ?> console.log("if: " + <?php echo json_encode($mobileScreenRes); ?>); }
                        else {<?php $mobileScreenRes = false; ?>console.log("else : " + <?php echo json_encode($mobileScreenRes); ?>); }
                        console.log("final:" + <?php var_export($mobileScreenRes); ?>);
                        console.log("isset :" + <?php echo isset($mobileScreenRes); ?>);

                    });
</script>

I can get width, but can not use this how I want. $mobileScreenRes variable is a global variable. Console output is:

795
VM45496:6 else : false
VM45496:7 final : false
VM45496:8 isset : 1

582
VM45496:5 if : true
VM45496:7 final :false
VM45496:8 isset : 1

I can not understand why the final is always false, even with the if statement?

PHP is **first** executed server side **and then** JS is executed client side — Cid, Aug 16 '21 at 10:21

Robson · Accepted Answer · 2021-08-16T10:44:12.400

I've reformatted the code to make it a bit easier to understand:

<script>
  window.addEventListener("resize", function (e) {
    var width = document.body.clientWidth;
    console.log(document.body.clientWidth);
    if (width <= 768) {
      <?php $mobileScreenRes = true; ?>
      console.log("if: " + <?php echo json_encode($mobileScreenRes); ?>);
    } else {
      <?php $mobileScreenRes = false; ?>
      console.log("else: " + <?php echo json_encode($mobileScreenRes); ?>);
    }
    console.log("final: " + <?php var_export($mobileScreenRes); ?>);
    console.log("isset: " + <?php echo isset($mobileScreenRes); ?>);
  });
</script>

You've got two languages here: PHP and JavaScript.

The important thing to know is:

All of the PHP gets executed first and it doesn't care about the JavaScript. Specifically this is executed by the web server, before the page has been sent to the user.
All of the JavaScript is executed after the PHP. This is executed by the user's browser.

After Step 1 the page would look like this:

<script>
  window.addEventListener("resize", function (e) {
    var width = document.body.clientWidth;
    console.log(document.body.clientWidth);
    if (width <= 768) {
      console.log("if: " + true);
    } else {
      console.log("else: " + false);
    }
    console.log("final: " + false);
    console.log("isset: " + 1);
  });
</script>

Which means that when Step 2 runs, those final two lines have already been set.

I'm assuming you want to know the resolution so you can change the page layout to adapt to the user's browser size? The best way to do that would be via [CSS @media rules](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp) and optionally JavaScript (if necessary). PHP runs on the web server before the page has been sent to the user, so it doesn't know what the user's browser size is and it can't respond to the browser being resized. — Robson, Aug 16 '21 at 11:43

PHP Variable Is Not Changing Even I Change It

1 Answers1