在《小七去哪儿》项目中，有个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

标签：css, javascript, jQuery