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

closed as off-topic by Rubén, serenesat, Al E., Meta, Eight Days of Malaise Apr 5 at 13:38

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "It is a question about creating/developing a web application." – Rubén, serenesat, Al E., Meta, Eight Days of Malaise
If this question can be reworded to fit the rules in the help center, please edit the question.

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

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

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

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

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