Home/ Questions/Q 7727197
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T05:23:59+00:00

A current jQuery project of mine requires browser resize (width AND height) functionality, some

  • 0

A current jQuery project of mine requires browser resize (width AND height) functionality, some of the supported resolutions are funky when compared to each other. Any suggestions to improve this comparative statement are welcome. I tried to close any holes, but I’ve a feeling there are a few left. Please note I’m also checking for a variable of ‘isIos’.

Here’s the script:

function getBrowserWidth() {
  $(window).load(function () {
    if (window.innerWidth) {
      return window.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientWidth != 0) {
      return document.documentElement.clientWidth;
    }
    else if (document.body) { return document.body.clientWidth; }
    return 0;
  });
  $(window).resize(function () {
    if (window.innerWidth) {
      return window.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientWidth != 0) {
      return document.documentElement.clientWidth;
    }
    else if (document.body) { return document.body.clientWidth; }
    return 0;
  });
}

function getBrowserHeight() {
  $(window).load(function () {
    if (window.innerHeight) {
      return window.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight != 0) {
      return document.documentElement.clientHeight;
    }
    else if (document.body) { return document.body.clientHeight; }
    return 0;
  });
  $(window).resize(function () {
    if (window.innerHeight) {
      return window.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight != 0) {
      return document.documentElement.clientHeight;
    }
    else if (document.body) { return document.body.clientHeight; }
    return 0;
  });
}

var browserWidth = getBrowserWidth(),
    browserHeight = getBrowserHeight(),
    isIphone = navigator.userAgent.match(/iPhone/i) != null,
    isIpod = navigator.userAgent.match(/iPod/i) != null,
    isIpad = navigator.userAgent.match(/iPad/i) != null,

    isIos = isIphone || isIpod || isIpad;

if (browserWidth <= 1024 && isIos) {

} else if (browserWidth > 800 && browserWidth <= 1024 && !isIos) {

} else if (browserWidth <= 1024 && browserHeight <= 768 && !isIos) {

} else if (browserWidth > 1024 && browserWidth <= 1280) {

} else if (browserWidth > 1024 && browserWidth <= 1280 && browserHeight <= 720) {

} else if (browserWidth > 1280 && browserWidth <= 1600) {

} else if (browserWidth > 1280 && browserWidth <= 1600 && browserHeight > 768 && browserHeight <= 900) {

} else if (browserWidth > 1920 && browserWidth <= 4000) {

} else if (browserWidth > 1920 && browserWidth <= 4000 && browserHeight > 1080 && browserHeight <= 4000) {

} else {

}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    if you really want to do this method, then i suggest a cascade comparison from highest to lowest (sort of switch statement). that way, you don’t need ranges:

    var w = $.Window.width();

if(w>4000){
    //greater than 4000
} else if(w>1920){
    //assumed less than 4000 greater than 1920
} else if (w>1280){
    //assumed less than 1920 but greater than 1280
} else if (w>1024){
   //assumed less than 1280 but greater than 1024
} else if (w>800){
   //assumed less than 1024 but greater than 800
} else {
   //small sized
}
    • 0