How to get screen resolution of visitor in javascript and/or php?

Question

I would like to know the screen resolution of a visitor visiting my page so I can properly make a jquery thickbox cover about 75% of their screen.

Solutions to the question or helping me solve my problem are greatly appreciated!

Answer 1

In JavaScript it’s:

screen.width
screen.height

But PHP has no access to the client. So you need to pass the values gathered by JavaScript to your PHP script.

Additionally not every user has his windows in full screen mode. So you should better use the available window width/height.

Answer 2

What makes you think people always have their browser window maximised to the same size as their screen? I don't, and I'm not the only one.

What you want is to cover 75% of their window. This can be done using CSS; if the element in question is a child of the body element, then

#box {
    position: absolute;
    top: 12.5%;
    left: 12.5%;
    width: 75%;
    height: 75%;
}

will probably do it (I've not tested it, though).

EDIT: I've now tested it, adding

html, body {
    width: 100%;
    height: 100%;
}

and it worked as expected, at least in Firefox 3.5 :-)

Answer 3

you can try this Window dimensions Hack and it speaks to ALL Browsers alike. (including dumb IE6)

var width = document.body.offsetWidth;
var bodyHeight = document.body.scrollHeight;
var height = (typeof window.innerHeight !== "undefined")? window.innerHeight :  (document.documentElement)? document.documentElement.clientHeight : document.body.clientHeight;
    height = (bodyHeight > height)? bodyHeight : height;

Answer 4

To get screen resolution via Javascript and pass it to PHP try read this http://www.maniacomputer.com/WebServer/screen_resolution_php_js.html

Answer 5

If you are using jQuery, there is cross-browser solution to get the browser window size:

var browserWidth = $(window).width();
var browserHeight = $(window).height();

Answer 6

Not everyone wants the window dimensions. The reason is not to change the layout, but to change certain elements such as font-size. If I know the client is using a resolution of 1024x768, then regardless of their window size, I want to set the font-size a bit lower then what its set at for a resolution of 1920x1200.