Dynamically Changing Your Target Window Width

By Deane Barker on March 28, 2006

Preparing for Widescreen: A good idea that’s going to become more and more popular as screen sizes exist in a much larger range of resolutions and aspect ratios than ever before.

I’m suggesting that we use a different stylesheet for different screen resolutions. With simple JavaScript, we can test for resolution and then load the corresponding stylesheet.

I did a proof-of-concept once for something similar. I checked the width of the screen window, then displayed or didn’t display a third column. I never did anything with it, but it worked well. I didn’t, however, capture the screen resize event like they do here.

(Why are they reloading the entire page on screen resize? Why not just rerun the function that detected the screen resolution window width and loaded the stylesheet in the first place? What am I missing?)



  1. If you look at his demo page, rather than his explanation, you’ll see this line in his javascript:

    window.onload = window.onresize = dynamicStyle;

    So he’s rerunning the resize function rather than reloading the page when the thing gets resized, which is the sane thing to do.

  2. I wrote the JavaScript for his article after pointing out many of the problems with the original implementation. Unfortunately, when the article was published the text mistakenly referenced the original technique.

Comments are closed. If you have something you really want to say, tweet @gadgetopia.