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