本文作者:佚名

JavaScript根据CSS的Media Queries来判断浏览设备的方法_javascript技巧

佚名 2019-05-04 ???
摘要:CSS 部分首先随便新建一个用来做判断的类,然后通过 Media Queries 来对这个类的 z-index 属性赋予不同的值。这个类仅作为 JavaS


CSS 部分

首先随便新建一个用来做判断的类,然后通过 Media Queries 来对这个类的 z-index 属性赋予不同的值。这个类仅作为 javascript 读取使用,所以需要将其移出屏幕窗口,让浏览者不可见以免引起意外情况。

作为演示,下面代码设置了四种设备状态:桌面普通版、小屏幕桌面版、平板电脑版和手机版。

.state-indicator {
  position: absolute;
  top: -999em;
  left: -999em;
  z-index: 1;
}
@media all and (max-width: 1200px) {
  .state-indicator {
    z-index: 2;
  }
}
@media all and (max-width: 1024px) {
  .state-indicator {
    z-index: 3;
  }
}
@media all and (max-width: 768px) {
  .state-indicator {
    z-index: 4;
  }
}

Javascript 判断

css 已经就位了,那么就需要用 Javascript 来生成了一个临时的 DOM 对象,然后为它设置对应的类,然后再读取这个对象的 z-index 值。原生的写法如下:

// Create the state-indicator element
var indicator = document.createElement('div');
indicator.className = 'state-indicator';
document.body.appendChild(indicator);
// Create a method which 
returns device statefunction getDeviceState() {
  
return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
}
getDeviceState() 函数返回的就是 z-index 的值,为了增强一下可读性,可以用 switch 函数来规范输出一下:function getDeviceState() {
  switch(parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10)) {
    case 2:      
return 'small-desktop';
      break;
    case 3:      
return 'tablet';
      break;
    case 4:      
return 'phone';
      break;
    default:      
return 'desktop';
      break;
  }
}

这样,就可以用一下代码来判断设备状态,然后执行相应的 Javascript 代码:

if(getDeviceState() == 'tablet') {
  // 平板电脑下执行的 Javascript 代码}

这里如果你使用的是 jQuery,直接使用下面代码就可以了:

$(function(){
  $('body').append('');
  function getDeviceState() {
    switch(parseInt($('.state-indicator').css('z-index'),10)) {
      case 2:        
return 'small-desktop';
        break;
      case 3:        
return 'tablet';
        break;
      case 4:        
return 'phone';
        break;
      default:        
return 'desktop';
        break;
    }
  }
  console.log(getDeviceState());
  $('.state-indicator').remove();
}
);

先创建,然后获取,最后删掉这个节点,具体的设备会在你的控制台中输出,点击这里查看 Demo ,可以试着拖动一下中间的边框,然后点击 Run。

未经允许不得转载:

作者:佚名,标题:JavaScript根据CSS的Media Queries来判断浏览设备的方法_javascript技巧,原文地址:https://www.vfjianzhan.com/js/201905/1.html发布于2019-05-04
转载或复制请以超链接形式并注明出处唯福建站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏