Some Bits in Few Pieces: Uniform Web Layout & Sizes

Well, one of my friends today wanted to keep the layout and the appearance of his webpage uniform over different screen resolutions. Since the apparent size of the font and the images changes with the screen resolution he wanted to keep them constant.

The obvious solution was to somehow zoom in or out the content. IE provides a zooming javascript call that can be used to zoom in/out any webpage. If you are using IE, try the links below:

Zoom In | Zoom Out | Original

To use this, we need to determine specific amount for the zoom for each resolution and then, when the page loads, we do the trick and zoom the page appropriately.

<script>
    var z_1024_768 = 0.8;
    var z_1280_1024 = 0.0;
    
    var zoom_value = 0.0;
    function CheckResolution()
    {
        var width = window.screen.width;
        var height = window.screen.height;
        if(width == 1024 && height == 768)
            zoom_value = z_1024_768;
        else if(width == 1280 && height == 1024)
            zoom_value = z_1280_1024;
        
        zoomDoc();
    }
    
    function zoomDoc()
    {
        window.parent.document.body.style.zoom = zoom_value;
    }
</script>

Add the above script in the head of the html document and add this onload handler to the body.

<body onload="CheckResolution();">

This would take care of the screen resolution and zoom in or out the document to give a uniform width. (The zoom values are randomly chosen, you would like to check the exact value that gives the similar layout to the document).

But this approach has a drawback, since the zooming is done based on the bitmap output displayed in the web-browser, it introduces some distortion.

So is there a way out of this?
Yes there is :) Using styles.

We define 2 style sheets with the same CSS classes and appropriate widths/heights/font sizes of various elements, and in the CheckResolution() function we attach the appropriate style sheet to the document. This is how we do it:

Step 1: Link a stylesheet to the current document and leave the href empty.

<link rel="stylesheet" href="" />

Step 2: Include the javascript in the head.

<script>
    var css_1024_768 = "style_1024_768.css";
    var css_1280_1024 = "style_1280_1024.css";
    
    var stylesheet = "";
    function CheckResolution()
    {
        var width = window.screen.width;
        var height = window.screen.height;
        if(width == 1024 && height == 768)
            stylesheet = css_1024_768;
        else if(width == 1280 && height == 1024)
            stylesheet = css_1280_1024;
        
        setDocStyle();
    }
    
    function setDocStyle()
    {
        document.styleSheets[0].href = stylesheet;
    }
<script>

Step 3: Add onload handler in body

<body onload="CheckResolution();">

And its all done. :)