JavaScript根據(jù)CSS的MediaQueries來判斷瀏覽設(shè)備的方法-1565783227

/* 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;
 }
}

// Create the state-indicator element
var indicator = document.createElement('div');
indicator.className = 'state-indicator';
document.body.appendChild(indicator);
 
// Create a method which returns device state
function getDeviceState() {
 return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
}
getDeviceState() 函數(shù)返回的就是 z-index 的值，為了增強(qiáng)一下可讀性，可以用 switch 函數(shù)來規(guī)范

if(getDeviceState() == 'tablet') {
 // 平板電腦下執(zhí)行的 JavaScript 代碼
}

$(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();
});