移动网页端对终端是Android还是ios进行判断

最新推荐文章于 2023-05-18 11:20:16 发布

灰灰灰羊

最新推荐文章于 2023-05-18 11:20:16 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/qq_39514538/article/details/80897893

版权

首先要了解一下navigator这个对象：

Navigator对象：包含有关浏览器的信息

Navigator 对象属性

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

我们可以看到其中一个属性是userAgent

userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。.

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>userAgent</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		document.write(navigator.userAgent)
	</script>
</html>

使用chrome浏览器运行，以上代码的输出结果为：

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

根据这个结果，我们可以进行一系列的判断。我是react的项目所以用的es6语法，代码如下：

equipment=()=>{
        const u = navigator.userAgent;
        const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid){
            this.setState({
                openUrl:'http://a.app.qq.com/o/simple.jsp?pkgname=cdwd.example.ui',
                equipment:1
            })
        }else if (isiOS){
            this.setState({
                openUrl:'http://a.app.qq.com/o/simple.jsp?pkgname=cdwd.example.ui',
                equipment:2
            })
        }
    };

然后根据两个state来进行判断和对应的操作

相关js代码：

/**
 * 判断是否是ios 系统
 * @returns {boolean}
 * @constructor
 */
BaoIsIos: function () {
    var ua = window.navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/.test(ua)) {
        return true;
    } else if (/android/.test(ua)) {
        return false;
    }
},
/**
 * 判断是否是微信
 * @returns {boolean}
 * @constructor
 */
BaoIsWeiChart: function () {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.indexOf("micromessenger") > -1) {
        return true;
    }
    return false;
},
/**
 * 判断是否移动端
 * @returns {boolean}
 * @constructor
 */
BaoIsMobile: function () {
    var ua = navigator.userAgent || navigator.vendor || window.opera;
    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(ua) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(ua.substr(0, 4))
},

灰灰灰羊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动网页端对终端是Android还是ios进行判断

首先要了解一下navigator这个对象： Navigator对象：包含有关浏览器的信息Navigator 对象属性属性描述appCodeName返回浏览器的代码名。appMinorVersion返回浏览器的次级版本。appName返回浏览器的名称。appVersion返回浏览器的平台和版本信息。browserLanguage返回当前浏览器的语言。cookieEnabled返回指明浏览器中是否启...
复制链接

扫一扫