建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要講解了“CSS和JavaScript怎么判斷瀏覽器設(shè)備類型”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS和JavaScript怎么判斷瀏覽器設(shè)備類型”吧！
我們提供的服務(wù)有：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、界首ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的界首網(wǎng)站制作公司
CSS代碼
首先最重要的還是CSS媒體查詢代碼。這里只是示例，我們創(chuàng)建了三個(gè)媒體查詢規(guī)則(但不包括缺省的“all”)，它能控制四種屏幕情況：桌面(這是缺省狀態(tài)，不需要媒體查詢規(guī)則)，“小屏幕”，平板，手機(jī)。針對(duì)每一種屏幕，我們給它一種不同的z-index值，這個(gè)值我們可以用JavaScript檢測(cè)到。我們把這個(gè)元素定位到屏幕外，這樣它就不會(huì)顯示出來；記住，它的作用就是存放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è)出頁面布局/js飾件中那些需要顯示，那些需要隱藏。
代碼如下:
if(getDeviceState() < 3) { // 如果是桌面電腦后小屏幕電腦
// 顯示js飾件....
}
有人也許會(huì)認(rèn)為這些數(shù)字太容易搞錯(cuò)，讓代碼很難維護(hù)。其實(shí)我們可以用一個(gè)對(duì)象來處理這種事情：
代碼如下:
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ī) */
用下面的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ā)生變化——用戶手工調(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)變化，通過自定義的DOM事件或JS 消息發(fā)布/訂閱模式，
// 我喜歡后者，所有就假設(shè)使用了一個(gè)這樣的工具庫
publish('/device-state/change', [state]);
}
}, 20));
// 用法
subscribe('/device-state/change', function(state) {
if(state == 3) { // or "tablet", if you used the object
}
});
注意，這里我使用了debounce方法來執(zhí)行resize事件發(fā)生時(shí)的動(dòng)作——這對(duì)于性能來說非常重要。是使用自定義DOM事件還是使用發(fā)布/訂閱模式，你自由選擇，因?yàn)槎己芎?jiǎn)單。
我覺得這種方法非常的好。有人可能會(huì)指出使用matchMedia也可以有相同效果，但問題是你需要在CSS里和JavaScript里都使用媒體查詢，而有些媒體查詢語句可能會(huì)很復(fù)雜，甚至?xí)蔀槟愕呢瑝?mèng)，不如使用簡(jiǎn)單的z-index。也有人會(huì)說可以使用 window.innerWidth來判斷，但這樣JS里獲取的屬性和CSS里的媒體查詢就需要相互轉(zhuǎn)換了，同樣也會(huì)成為你的惡魔。我的方法的好處就在于你可以用它判斷其他類型的媒體查詢屬性，例如檢查手機(jī)是橫向(landscape)還是豎向(portrait)。
感謝各位的閱讀，以上就是“CSS和JavaScript怎么判斷瀏覽器設(shè)備類型”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)CSS和JavaScript怎么判斷瀏覽器設(shè)備類型這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
文章名稱：CSS和JavaScript怎么判斷瀏覽器設(shè)備類型
分享地址：http://www.dlmjj.cn/article/ghpgep.html
