浏览器调整比较声明

时间:2012-03-30 18:38:01

标签: javascript jquery browser resize

我当前的jQuery项目需要浏览器调整大小(宽度和高度)功能,一些支持的分辨率相互比较时很时髦。欢迎任何改进此比较陈述的建议。我试图关闭任何洞,但我感觉还有一些洞。请注意我也在检查'isIos'的变量。

这是脚本:

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 {

}

1 个答案:

答案 0 :(得分:0)

如果你真的想要这个方法,那么我建议从最高到最低的级联比较(切换语句的种类)。这样,你不需要范围:

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
}