Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.