JavaScript根据CSS的Media Queries来判断浏览设备的方法
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来判断浏览设备的方法的更多相关文章
- CSS3 Media Queries 详细介绍与使用方法
Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支持. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 到底什么是 ...
- CSS3 Media Queries 详细介绍与使用方法[转]
Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 关于Med ...
- CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...
- 用JavaScript操作Media Queries
在响应式(或自适应)设计中要用到Media Queries这个CSS属性,但在某些时候我们需要对Media Queries进行动态操作,这时候可以使用Javascript. 如以下Media Quer ...
- Device Pixel Ratio & Media Queries
一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放 ...
- 使用CSS3 Media Queries实现网页自适应
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- 使用CSS3 Media Queries实现网页自适应(转)
当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以传统的固定宽度设计形式将不再是个最佳选择,网页设 ...
- CSS3 Media Queries模板
使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (m ...
随机推荐
- Win7允许被ping
我们可以通过命令行方式来执行入站 Ping 的规则是启用还是禁用,命令行如下: netsh firewall set icmpsetting 8 netsh firewall set icmpsett ...
- C++学习12 友元函数和友元类
友元函数和友元类在实际开发中较少使用,想快速学习C++的读者可以跳过本节. 一个类中可以有 public.protected.private 三种属性的成员,通过对象可以访问 public 成员,只有 ...
- springmvc对请求执行流程
doService-->getHandlerMapping-->handlerMapping-->getHandler-->HandlerExecutionChain--> ...
- spring整合struts
整合目标:使用spring的bean管理struts action service. 整合步骤: 一.加入spring 1.加入spring jar包 2.配置web.xml文件 <contex ...
- SVN提交数据失败问题(提示 svn:MKACTIVITY ... 403 Forbidden )
注册了淘宝svn,结果在代码提交是老是出问题,如下截图所示: 网上有常用的一种方法是: http://jingyan.baidu.com/article/67508eb4d3f2e29ccb1ce47 ...
- java重写
1.当子类重写父类方法时,修改方法的修饰权限只能从小的范围到大的范围改变,不能从大的范围向小的范围改变,public protected private,[权限篇] 2.子类重写父类方法还可以修改 ...
- 在页面中使用Eval的两种方案
①直接取<%#Eval("name")%> ②进行运算<%#Convert.ToInt32(Eval("count"))-(Eval(&quo ...
- MFC创建非模态对话框并修改CStatic文字
//由IDD_STATUS_DIALOG创建一个对话框CDialog* pCheckNetStatusDlg = new CDialog(); pCheckNetStatusDlg->Creat ...
- nearly,about,almost的区别
nearly 几乎,将近almost 几乎,差一点儿就,差不多(与动词,副词,形容词以及名词连用时,可与nearly通用;与no,none,nothing,never等否定式连用时,不可与nearly ...
- Orchard官方文档翻译(二) 安装 Orchard
原文地址:http://docs.orchardproject.net/Documentation/Installing-Orchard 想要查看文档目录请用力点击这里 最近想要学习了解orchard ...