Get browser page width and so adjust content.

halojoy

Is there a way to get the current width of browser window?
So I can adjust the width of page content.

NogDog

Probably the most common way is with "media queries" in your CSS. It can be really powerful in combination with "CSS Grid".

halojoy

I found this script on the web.
Naturally it uses a javascript.
The script does a reload with the width in GET variable.
The variable is put into SESSION.
After another reload the current width is accessible in the SESSION['browser_width']

<?php
session_start();
if(isset($_SESSION['browser_width'])){
    echo 'User browser width: ' . $_SESSION['browser_width'];
    //$_SESSION = array(); use when testing
} else if(isset($_GET['width'])) {
    $_SESSION['browser_width'] = $_GET['width'];
    header('Location: ' . $_SERVER['PHP_SELF']);
} else {
    echo '<script type="text/javascript">window.location = "'
        . $_SERVER['PHP_SELF'] . '?width="+innerWidth</script>';
}
?>

maxxd

You could use Window.innerWidth if you need the width in JavaScript. If it is just a styling thing, use CSS media queries as NogDog recommends.

ahmedfahad007

There is no way in PHP to do this. If you want to know what device is being used by the users you should examine $_SERVER['HTTP_USER_AGENT'] for clues or you can use css media queries.

halojoy

I have now got a way that works.
Here is my script:

<?php
session_start();

if (isset($_GET['width'])) {
    $_SESSION['browser_width'] = $_GET['width'];
    header('location: ' . $_SERVER['PHP_SELF']);
    exit();
} elseif (!isset($_SESSION['browser_width'])) {
    echo '<script type="text/javascript">window.location = "'
        . $_SERVER['PHP_SELF'] . '?width="+innerWidth</script>';
    exit();
}
echo $_SESSION['browser_width'];
// Delete for a new value, if is a change next time
$_SESSION  = array(); 
?>

maxxd

$_SERVER['PHP_SELF'] can be spoofed and/or modified. Using this code is opening a security hole in your script. What exactly are you planning to do with the information on the server? You could always use JavaScript to get the data and send it via AJAX to the server if you absolutely need to - this would at least be a more correct way to handle the issue.

Weedpacket

The "load every page twice so that we can have the browser tell the server how wide the window is for <reasons>" method also obviously fails if the user resizes the window after the page has been loaded (for the second time).
Why does the server need to know how wide the client's browser window happens to be at the moment when a request is made?

sneakyimp

ahmedfahad007 and Weedpacket are right. PHP code is not the right way to size your layout. You'd be much better off relying on a client-side technology like Javascript to adjust the display of your layout. This is precisely the sort of thing that Bootstrap was meant to accomplish. You might want to check out how bootstrap addresses the problem of designing your layout in a world of many different screen sizes. As others have suggested, CSS media queries are a good way to have your layout respond, but you might benefit from using a general framework built by a team that's already considered a lot of the common situations that arise.