Take the 2-minute tour ×
Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.

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
1  
The code runs on the client-side and get the client machine's resolution. –  Julius A Jul 28 '10 at 9:42
add comment

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

//-->
</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
add comment

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

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

Your Answer

 
discard

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.