移动端html5开发关于用js检测用户设备
检测移动设备
通过用户代理,检测浏览网页设备为android,iphone,ipad等:
用户代理中包含设备的型号,如android,iphone,ipad等
用正则去匹配UA,得到设备型号
var UA = window.navigator.userAgent,
isAndorid = /android/i.test(UA),
isIphone = /iphone/i.test(UA),
//isIphone = /(?:iPhone)/.test(UA),
isPad = /ipad/i.test(UA),
isDolphin = typeof dolphin !== 'undefined';
device = isAndorid ? 'android' : isIphone ? 'iphone' : isPad ? 'ipad':'unknow';
关于正则表达式中括号、问号和冒号:
正则表达式中,添加括号(),表示将成功匹配字符串赋给RegExp.$1等返回,而括号中表达式之前加“?:”则表示不将匹配字符串赋给RegExp.$1,此时输出RegExp.$1为空
关于i:
正则表达式之后加i表示,匹配字符串不区分大小写
javascript中的RegExp.$1
RegExp 是javascript中的一个内置对象。为正则表达式。
RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串,以此类推,RegExp.$2,RegExp.$3,..RegExp.$99总共可以有99个匹配,看了例子就知道了
<script>
var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正则表达式 匹配出生日期(简单匹配)
r.exec('1985-10-15');
s1=RegExp.$1;
s2=RegExp.$2;
s3=RegExp.$3;
alert(s1+" "+s2+" "+s3)//结果为1985 10 15
</script>
附加匹配主流浏览器设备:
用JavaScript代码来判断浏览器类型及设备访问该网页,支持手机上所有的浏览器。具体代码如下:
<script>
// 检测设备类型
var UA = window.navigator.userAgent,
isQQBrowser = /(?:MQQBrowser | QQ)/.test(UA),
isWindowsPhone = /(?:Windows Phone)/.test(ua),
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
isAndroid = /(?:Android)/.test(ua),
isFireFox = /(?:Firefox)/.test(ua),
isChrome = /(?:Chrome|CriOS)/.test(ua),
isIpad = /(?:iPad|PlayBook)/.test(ua),
isTablet = /(?:iPad|PlayBook)/.test(ua)||(isFireFox && /(?:Tablet)/.test(ua)),
isSafari = /(?:Safari)/.test(ua),
isPhone = /(?:iPhone)/.test(ua) && !isTablet,
isOpen= /(?:Opera Mini)/.test(ua),
isUC = /(?:UCWEB|UCBrowser)/.test(ua),
isPc = !isPhone && !isAndroid && !isSymbian;
</script>