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

  

JavaScript 判断

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

// 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() 函数返回的就是 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;
}
}

  

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

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

  

这里如果你使用的是 jQuery,直接使用下面代码就可以了:

$(function(){
$('body').append('<div class="state-indicator"></div>'); 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();
});

  

JavaScript根据CSS的Media Queries来判断浏览设备的方法的更多相关文章

  1. CSS3 Media Queries 详细介绍与使用方法

    Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支持. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 到底什么是 ...

  2. CSS3 Media Queries 详细介绍与使用方法[转]

    Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 关于Med ...

  3. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

  4. 用JavaScript操作Media Queries

    在响应式(或自适应)设计中要用到Media Queries这个CSS属性,但在某些时候我们需要对Media Queries进行动态操作,这时候可以使用Javascript. 如以下Media Quer ...

  5. Device Pixel Ratio & Media Queries

    一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放 ...

  6. 使用CSS3 Media Queries实现网页自适应

    原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...

  7. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  8. 使用CSS3 Media Queries实现网页自适应(转)

    当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以传统的固定宽度设计形式将不再是个最佳选择,网页设 ...

  9. CSS3 Media Queries模板

    使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (m ...

随机推荐

  1. Win7允许被ping

    我们可以通过命令行方式来执行入站 Ping 的规则是启用还是禁用,命令行如下: netsh firewall set icmpsetting 8 netsh firewall set icmpsett ...

  2. C++学习12 友元函数和友元类

    友元函数和友元类在实际开发中较少使用,想快速学习C++的读者可以跳过本节. 一个类中可以有 public.protected.private 三种属性的成员,通过对象可以访问 public 成员,只有 ...

  3. springmvc对请求执行流程

    doService-->getHandlerMapping-->handlerMapping-->getHandler-->HandlerExecutionChain--> ...

  4. spring整合struts

    整合目标:使用spring的bean管理struts action service. 整合步骤: 一.加入spring 1.加入spring jar包 2.配置web.xml文件 <contex ...

  5. SVN提交数据失败问题(提示 svn:MKACTIVITY ... 403 Forbidden )

    注册了淘宝svn,结果在代码提交是老是出问题,如下截图所示: 网上有常用的一种方法是: http://jingyan.baidu.com/article/67508eb4d3f2e29ccb1ce47 ...

  6. java重写

    1.当子类重写父类方法时,修改方法的修饰权限只能从小的范围到大的范围改变,不能从大的范围向小的范围改变,public  protected  private,[权限篇] 2.子类重写父类方法还可以修改 ...

  7. 在页面中使用Eval的两种方案

    ①直接取<%#Eval("name")%> ②进行运算<%#Convert.ToInt32(Eval("count"))-(Eval(&quo ...

  8. MFC创建非模态对话框并修改CStatic文字

    //由IDD_STATUS_DIALOG创建一个对话框CDialog* pCheckNetStatusDlg = new CDialog(); pCheckNetStatusDlg->Creat ...

  9. nearly,about,almost的区别

    nearly 几乎,将近almost 几乎,差一点儿就,差不多(与动词,副词,形容词以及名词连用时,可与nearly通用;与no,none,nothing,never等否定式连用时,不可与nearly ...

  10. Orchard官方文档翻译(二) 安装 Orchard

    原文地址:http://docs.orchardproject.net/Documentation/Installing-Orchard 想要查看文档目录请用力点击这里 最近想要学习了解orchard ...