使用CSS媒體查詢和JavaScript判斷瀏覽器設(shè)備類型的方法是咋樣的

今天就跟大家聊聊有關(guān)使用CSS媒體查詢和JavaScript判斷瀏覽器設(shè)備類型的方法是咋樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

有無(wú)數(shù)的理由要求我們?cè)谌魏螘r(shí)候都應(yīng)該知道用戶是使用的什么設(shè)備瀏覽我們的網(wǎng)站——寬屏，普通屏，平板，手機(jī)？知道這些特征，我們web應(yīng)用的CSS和JavaScript才能同步做相應(yīng)的操作。在給Mozilla Developer Networks改版設(shè)計(jì)的過(guò)程中，我發(fā)現(xiàn)使用CSS媒體查詢(media queries)雖然非常的有效，但有時(shí)，JavaScript卻不能及時(shí)知道用戶瀏覽設(shè)備的狀態(tài)。瀏覽網(wǎng)站的用戶使用的是桌面電腦，還是平板，還是手機(jī)？這對(duì)于CSS來(lái)說(shuō)很容易，但CSS卻無(wú)法將這些信息告訴JavaScript。我發(fā)明了一種基于CSS媒體查詢和z-index屬性的方法，能告訴JavaScript用戶當(dāng)前使用的是什么屏幕，這樣我能調(diào)整JavaScript的動(dòng)作來(lái)響應(yīng)這種屏幕尺寸。

CSS代碼

首先最重要的還是CSS媒體查詢代碼。這里只是示例，我們創(chuàng)建了三個(gè)媒體查詢規(guī)則(但不包括缺省的“all”)，它能控制四種屏幕情況：桌面(這是缺省狀態(tài)，不需要媒體查詢規(guī)則)，“小屏幕”，平板，手機(jī)。針對(duì)每一種屏幕，我們給它一種不同的z-index值，這個(gè)值我們可以用JavaScript檢測(cè)到。我們把這個(gè)元素定位到屏幕外，這樣它就不會(huì)顯示出來(lái)；記住，它的作用就是存放z-index值，我們要用javaScript獲取這個(gè)值。

代碼如下:

/* 缺省屏幕 */
.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;
   }
}
/* 手機(jī) */
@media all and (max-width: 768px) {
   .state-indicator {
       z-index: 4;
   }
}

每種z-index都在告訴我們的JavaScript當(dāng)前的用戶使用的是什么規(guī)格的屏幕。我們并不像知道用戶究竟使用的是什么設(shè)備，因?yàn)槟憧梢詫g覽器寬度拉的很窄，但我們需要就是可視寬度，這樣我們可以調(diào)整應(yīng)用的布局。

JavaScript代碼

也許你認(rèn)為可以在DomContentLoaded時(shí)知道屏幕的大小，但我們需要實(shí)時(shí)知道屏幕的大小(因?yàn)橛脩魰?huì)調(diào)整瀏覽器窗口的大小)，我們需要有個(gè)方法獲取當(dāng)前窗口的屬性：

代碼如下:

// 創(chuàng)建狀態(tài)指示元素
var indicator = document.createElement('div');
indicator.className = 'state-indicator';
document.body.appendChild(indicator);
// 獲取設(shè)備類別的方法
function getDeviceState() {
   return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
}

使用這個(gè)方法，你就能檢測(cè)出頁(yè)面布局/js飾件中那些需要顯示，那些需要隱藏。

代碼如下:

if(getDeviceState() < 3) { // 如果是桌面電腦后小屏幕電腦
   // 顯示js飾件....
}

有人也許會(huì)認(rèn)為這些數(shù)字太容易搞錯(cuò)，讓代碼很難維護(hù)。其實(shí)我們可以用一個(gè)對(duì)象來(lái)處理這種事情：

代碼如下:

function getDeviceState() {
   var index = parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
   var states = {
       2: 'small-desktop',
       3: 'tablet',
       4: 'phone'
   };
   return states[index] || 'desktop';
}

這樣，你就一個(gè)寫出更具可讀性的邏輯判斷：

代碼如下:

if(getDeviceState() == 'tablet') {
   // Do whatever
}

也許使用CSS的偽元素的content屬性是個(gè)更好的方法：

代碼如下:

.state-indicator {
   position: absolute;
   top: -999em;
   left: -999em;
}
.state-indicator:before { content: 'desktop'; }
/* 小屏幕桌面 */
@media all and (max-width: 1200px) {
   .state-indicator:before { content: 'small-desktop'; }
}
/* 平板 */
@media all and (max-width: 1024px) {
   .state-indicator:before { content: 'tablet'; }
}
/* 手機(jī) */
@media all and (max-width: 768px) {
   .state-indicator:before { content: 'mobile'; }
}

用下面的JavaScript方法獲取關(guān)鍵的內(nèi)容：

代碼如下:

var state = window.getComputedStyle(
   document.querySelector('.state-indicator'), ':before'
).getPropertyValue('content')

如何組織這些代碼全看你自己了。如果你有一個(gè)全局對(duì)象，例如window.config或window.app等，你可以把這些方法放到里面。我傾向于模塊化這些功能，你可以把它做成jQuery插件或JavaScript工具包。不管你如何實(shí)現(xiàn)，它們都是你可以信賴的、簡(jiǎn)單易用的檢測(cè)用戶設(shè)備的好方法。

更上一層樓

我們知道屏幕尺寸會(huì)發(fā)生變化&mdash;&mdash;用戶手工調(diào)整瀏覽器大型或手機(jī)用戶調(diào)整了手機(jī)方向，所以，當(dāng)這些事件發(fā)生時(shí)，我們需要讓系統(tǒng)告訴我們。下面這段簡(jiǎn)單的代碼估計(jì)是你需要的：

代碼如下:

var lastDeviceState = getDeviceState();
window.addEventListener('resize', debounce(function() {
   var state = getDeviceState();
   if(state != lastDeviceState) {
       // 保持當(dāng)前的狀態(tài)
       lastDeviceState = state;
       // 宣告狀態(tài)變化，通過(guò)自定義的DOM事件或JS 消息發(fā)布/訂閱模式，
       // 我喜歡后者，所有就假設(shè)使用了一個(gè)這樣的工具庫(kù)
       publish('/device-state/change', [state]);
   }
}, 20));
// 用法
subscribe('/device-state/change', function(state) {
   if(state == 3) {
   // or "tablet", if you used the object
   }
});

注意，這里我使用了debounce方法來(lái)執(zhí)行resize事件發(fā)生時(shí)的動(dòng)作&mdash;&mdash;這對(duì)于性能來(lái)說(shuō)非常重要。是使用自定義DOM事件還是使用發(fā)布/訂閱模式，你自由選擇，因?yàn)槎己芎?jiǎn)單。

我覺(jué)得這種方法非常的好。有人可能會(huì)指出使用matchMedia也可以有相同效果，但問(wèn)題是你需要在CSS里和JavaScript里都使用媒體查詢，而有些媒體查詢語(yǔ)句可能會(huì)很復(fù)雜，甚至?xí)蔀槟愕呢瑝?mèng)，不如使用簡(jiǎn)單的z-index。也有人會(huì)說(shuō)可以使用 window.innerWidth來(lái)判斷，但這樣JS里獲取的屬性和CSS里的媒體查詢就需要相互轉(zhuǎn)換了，同樣也會(huì)成為你的惡魔。我的方法的好處就在于你可以用它判斷其他類型的媒體查詢屬性，例如檢查手機(jī)是橫向(landscape)還是豎向(portrait)。

不管怎樣，你可以試一下，告訴我你的感覺(jué)！

看完上述內(nèi)容，你們對(duì)使用CSS媒體查詢和JavaScript判斷瀏覽器設(shè)備類型的方法是咋樣的有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。