Resizing Browser Window - Did it work?

JavaScript
1

Hi-
I’ve got a basic question on using JavaScript and/or jQuery to resize browser windows.

I tried using two different scripts, but when I tested them in my iPhone, they both looked the same to me. Essentially the difference between the two is that in Script #2 I’ve added the following:

window.onload = function () {
    adjustStyle();
};

Is there something obvious that I’m missing here? Thanks,

Script #1


function adjustStyle() {
    var width = 0;
    // get the width.. more cross-browser issues
    if (window.innerHeight) {
        width = window.innerWidth;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        width = document.documentElement.clientWidth;
    } else if (document.body) {
        width = document.body.clientWidth;
    }
    // now we should have it
    if (width < 600) {
        document.getElementById("myCSS").setAttribute("href", "_css/narrow.css");
    } else {
        document.getElementById("myCSS").setAttribute("href", "_css/main.css");
    }
}

// now call it when the window is resized.
window.onresize = function () {
    adjustStyle();
};

Script #2


function adjustStyle() {
    var width = 0;
    // get the width.. more cross-browser issues
    if (window.innerHeight) {
        width = window.innerWidth;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        width = document.documentElement.clientWidth;
    } else if (document.body) {
        width = document.body.clientWidth;
    }
    // now we should have it
    if (width < 600) {
        document.getElementById("myCSS").setAttribute("href", "_css/narrow.css");
    } else {
        document.getElementById("myCSS").setAttribute("href", "_css/main.css");
    }
}

// now call it when the window is resized.
window.onresize = function () {
    adjustStyle();
};
window.onload = function () {
    adjustStyle();
};
2

Is there some particular reason why you want to test the viewport size in JavaScript rather than using a CSS media query?

3

No, not really. I’m new to this and am not aware of the differences between the two. I just started reading a piece by Ethan Marcotee in A List Apart on CSS media queries, but I’m not very confident in my understanding of it. How would I do the resize with CSS media query? Thanks :slight_smile: