Question

I am using plain JavaScript code to detect browser viewport and which is as follows:

function setLocation(url) {
   if (window.location.href.indexOf(url) === -1)
      window.location = url;
}

function reloadPage(width) {
    if (width < 701) {
        setLocation("layout700.php");
    } else if (width < 900) {
        setLocation("layout900.php");
    } else {
        setLocation("layout1200.php");
    }
}

var done = false;

function ready() {
    if(!done) {
        done = true;
        reloadPage(document.width);
    }
}

if(window.addEventListener) {
    window.addEventListener('DOMContentLoaded', ready, false);
    window.addEventListener('load', ready, false);
} else if(window.attachEvent) {
    window.attachEvent('onload', ready);
}

window.onresize = function() {
    reloadPage(document.width);
};

My question is : How can I define width range in this?

What I mean is…. Is it correct if I use as

function reloadPage(width) {
    if (width <= 701 && >= 480) {
        setLocation("layout700.php");
    } else if (width <= 900 && >= 701) {
        setLocation("layout900.php");
    } else {
        setLocation("layout1200.php");
    }
}

If this is not correct then what is the correct syntax? Kindly help.

Answer 1

function reloadPage(width) {
    if( width >= 480 ) {
      if (width <= 701 ) {
        setLocation("layout700.php");
      } else if ( width <= 900 ) {
          setLocation("layout900.php");
      } else {
         setLocation("layout1200.php");
      }
   }
}

What is changed from your code ?
– After the logical operator ” && ” you did not mention the variable name, which is incorrect.
– You need not check for ” width > 701 ” in the second condition, because, if it was <= 701, the first condition would have been satisfied.

EDIT : Added a wrapper if() to check the page is greater than 480, since you don’t have any layouts specific to that.