Take the 2-minute tour ×

For example have a look at this website,

alt text

I am wondering how an application like this would work.

From what I understand, resolution awareness is not there with the webpage generator, but with the browser (webpage renderer). How does this work, then?

share|improve this question
The code runs on the client-side and get the client machine's resolution. –  Julius A Jul 28 '10 at 9:42

3 Answers 3

up vote 4 down vote accepted

The page you refer to uses JavaScript.

If you "view source", you'll see the following script:

<SCRIPT language="JavaScript">

height = screen.height;
width = screen.width;

res = document.getElementById ('resolutionNumber');
res.innerHTML = width + " X " + height;

if (res == null)
    alert ("hello");

share|improve this answer
BTW, the screen resolution is usually not <i>that</i> valuable (unless you plan to run a full screen solution). The user will use a web browser with menus, tool bars, status bars, side bars etc. And the available space is therefore completely different from the screen resolution. –  Jørn E. Angeltveit Jul 28 '10 at 10:15
ørn Not valuable? Tell that to the pop-up ad merchants who every now and then manage to get round the browser's protection and put a full-screen (but not maximized) browser window on my first screen. –  GAThrawn Jul 28 '10 at 13:24

Unfortunately, this only works for single monitor setups. jQuery's $(window).width() and $(window).height() will work even on a window stretched over more screens.

share|improve this answer
This is valuable. –  Slavo Jul 30 '10 at 13:17

You can also use media queries to alter the layout of a web site based on the size of the viewing window, the screen resolution, or even the pixel density.

share|improve this answer

Your Answer


