Get user's screen&viewport dimensions in php on first load

StackOverflow https://stackoverflow.com/questions/18101207

  •  23-06-2022
  •  | 
  •  

Question

I want to get in PHP the height/width of both the screen and the viewport when a user visits a page.

I've tried different ways but they all cause other problems.

My goals:

  • Get the info on the first load (no jump page, no reload).

  • Not change the url

  • Not affect the rest of the PHP that runs on load, or make that PHP run twice

What I've tried so far:

Javascript to get viewport dimensions:

if(!isset($_POST['width']) || !isset($_POST['height'])) {
echo '
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    var height = $(window).height();
    var width = $(window).width();
    $.ajax({
        type: \'POST\',
        data: {
            "height": height,
            "width": width
        },
        success: function (data) {
            $("body").html(data);
        },
    });
});
</script>
';
}

$user_width = $_POST['width'];
$user_height = $_POST['height'];

problems: causes all php to run twice, once on load, once when it returns a value (the second time is about 4 seconds after the first), which makes the rest of the php wacky... also, makes page load very slow

Putting the screen dimensions into the url:

if(isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height'])){
    $user_width = $_SESSION['screen_width'];
    $user_height = $_SESSION['screen_height'];
    } else if(isset($_REQUEST['width']) AND isset($_REQUEST['height'])) {
        $_SESSION['screen_width'] = $_REQUEST['width'];
        $_SESSION['screen_height'] = $_REQUEST['height'];
        header('Location: ' . $_SERVER['PHP_SELF']);
    } else {
        echo '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?width="+screen.width+"&height="+screen.height;</script>';
    }

problems: changes the url (which affects other code and looks bad compared to expressionless urls which they have now); doesn't return viewport size afaik

I'm a noob. Maybe it's easy to do, but I really don't know. I searched a lot. That's how I got methods above. But I couldn't get them to work for me. Afaik, I haven't seen a solution anywhere to a similar situation.

Thanks :)

Was it helpful?

Solution

How about having your document ready AJAX request send to a separate PHP document, then include that in the head on page load. That way, you can have whatever specific HTML you want loaded put straight into the body when ready.

For example: 

<head>
<script>
$(document).ready( function() {
    var height = $(window).height();
    var width = $(window).width();
    $.ajax({
        url: 'body.php',
        type: 'post',
        data: { 'width' : width, 'height' : height, 'recordSize' : 'true' },
        success: function(response) {
            $("body").html(response);
        }
    });
});
</script>
</head>
<body></body>

And then your body.php file would look something like: 

<?php
if(isset($_POST['recordSize'])) {
$height = $_POST['height'];
$width = $_POST['width'];
$_SESSION['screen_height'] = $height;
$_SESSION['screen_width'] = $width;
//Any html you want returned in here

If you then didn't want that JS function to run every page load, just encase the whole thing in a <?php if(isset($_SESSION['screen_height'])) { //JS function } ?>

I'm not 100% sure what you were intending to do with the dimensions once you have them, so I apologise if my answer is a little vague, but by doing it this way the page only sets the saved dimensions on the first visit this browsing session, and it doesn't have to redirect, so I hope it's at least a little helpful :)

OTHER TIPS

I think it's better to ask yourself: What do you want to do with the width and height? And look if there are other ways to accomplish that goal. You cannot get the user his screen width and height using PHP because it runs server-side.

So this data is never available on the first load.

You could submit the data using AJAX and then make the changes to the page using JavaScript. Then the next page reload the data is, when stored, server-sided available.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top