2014年10月24日

css,javascript和jQuery判断是否移动设备的有效写法


切图网(www.qietu.com):在《小七去哪儿》项目中,有个flash的地方需要针对ipad显示一个flash的替代方案 ,这个时候需要用到了如何判断访问者是什么设备,用css和javascript、jQuery均可以实现,css主要通过css3多媒体查询,例如当宽度小于1020的时候,写一段css,将pc的flash隐藏,将ipad的替代方案显示。

这种方法理论可行,但是没有具体测试过,写法如下

@media screen and (max-width: 1020px) {
#pc{ display:hide;}

#ipad{ display:block;}
}

最终用到了javascript的判断写法,但是javascript代码一定要放在页面最底部,这样保证javascript执行的时候,pc和ipad的元素已经加载出来了,否则javascript会无效,也可能会报错。

if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){

if(window.location.href.indexOf(“?mobile”)<0){

alert(1);

document.getElementById(‘ipad’).style.display==”block”;

document.getElementById(‘pc’).style.display==”none”;

}

}

最终换成jQuery的解决方案,几句话搞掂。

$(function(){

if (navigator.userAgent.match(/mobile/i)) {

$(‘#ipad’).show();

$(‘#pc’).hide();

}

})

该文章为原创,请尊重原创,你可以分享该文章在注明来源的情况下,切图网是国内首家致力于web开发的服务公司,欢迎选择与切图网强强合作,合作请致电:4000-724-120

标签:, ,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》