Get browser window size/resolution with PHP

php javascript html css browser

30,869

Solution 1

Cannot be done with PHP. Even if it could, this CSS is a far better solution.

You have encountered the most annoying CSS problem in existence. There seems to be as many answers to this question as there are people asking it. The above link is the best, most cross-browser friendly solution I have found for this issue.

Don't let the part about the footer confuse you. If you don't want a footer, it will still work perfectly.

Solution 2

$window_width = "<script type='text/javascript'>document.write(window.innerWidth);</script>";

Solution 3

Here's how I did it. I just replaced my index.php with this simple little tool, and renamed my index.php index2.php. It just checks these things using pure javascript and passes them to your real index file as $_GET variables. What could be easier than that? All done! Took me 5 minutes, will take you 30 seconds :)

<html>
<head>
    <script type="text/javascript">

        if(window.innerHeight > window.innerWidth){
            var landscapeOrPortrait = 'portrait';
        } else {
            var landscapeOrPortrait = 'landscape';
        }

        var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

        var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;



        window.location.replace('index2.php?width='+width+'&height='+height+'&landscapeOrPortrait='+landscapeOrPortrait);            
    </script>            
</head>

Solution 4

Use absolute positioning.

.nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}
.content {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
}

View more solutions

30,869

Author by

Pmillan

please delete me

Updated on July 09, 2022

Comments

Pmillan almost 2 years

I have a page that starts with a navigation bar, with specific height, and under that I placed a code that should fill out the rest of the height. How could I code it for various resolutions? I need the "working area" size of the browser.
My Head Hurts over 12 years

That would not work. Anthing after the fold would still be the body colour: jsfiddle.net/FeP3b
Roko C. Buljan over 12 years

Really great article and demo! +1
gilly3 over 12 years

@myhead - who said anything about background color or content extending beyond the fold? My code causes an element to fill the remaining space in the browser window following a header with fixed height. Maybe you are assuming too much about the original poster's requirements.
My Head Hurts over 12 years

You are right - that was an assumption, but I believe it to be a fair one. If you were not to apply a background colour or border, then what reason is there to make an element fill the remaining space?
Admin over 4 years

this is among somethings in the world, which I like, work like a charm