What allows a web application to find out the resolution of the screen when the page is rendered?

Question

For example have a look at this website,

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?

Answer 1

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

//-->
</SCRIPT>

Answer 2

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.

Answer 3

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.