JavaScript根据CSS的MediaQueries来判断浏览设备的方法-1565783227

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

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

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

查看更多关于JavaScript根据CSS的MediaQueries来判断浏览设备的方法-1565783227的详细内容...