JavaScript根据CSS的Media Queries来判断浏览设备的方法_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:18:22
Original
753 Leute haben es durchsucht

CSS 部分

首先随便新建一个用来做判断的类,然后通过 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; }}
Nach dem Login kopieren

JavaScript 判断

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

// Create the state-indicator elementvar 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; }}
Nach dem Login kopieren

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

if(getDeviceState() == 'tablet') { // 平板电脑下执行的 JavaScript 代码}
Nach dem Login kopieren

这里如果你使用的是 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();});
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!