Сравнительный отчет по изменению размера браузера - PullRequest
Новая
       33

Сравнительный отчет по изменению размера браузера

1 голос
/ 30 марта 2012

Мой текущий проект 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 голосов
/ 30 марта 2012

Если вы действительно хотите сделать этот метод, то я предлагаю каскадное сравнение от наивысшего к низшему (своего рода оператор переключения).Таким образом, вам не нужны диапазоны: 

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
}
...