CODEWITHSUNDEEP
phpjavascripthtmlcssbrowser
Pmillan
Pmillan

Reputation: 573

Get browser window size/resolution with PHP

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.

Upvotes: 8

Views: 35531

Answers (4)

Peter
Peter

Reputation: 91

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

Upvotes: 7

Sasha Shepherd
Sasha Shepherd

Reputation: 71

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>

Upvotes: 2

Scott Greenfield
Scott Greenfield

Reputation: 2828

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.

Upvotes: 2

gilly3
gilly3

Reputation: 91497

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;
}

Upvotes: 0

Related Questions