13518219792
JavaScript中怎么判断前端应用运行环境，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
成都创新互联公司主营宁德网站建设的网络公司,主营网站建设方案,成都App制作,宁德h5微信小程序开发搭建,宁德网站营销推广欢迎宁德等地区企业咨询
我们部署在某些云平台或者Web服务器上的前端应用，既可以用PC端浏览器访问，也可以用手机上的浏览器访问。
在前端应用里，有时候我们需要根据运行环境的不同做出对应处理。比如下面这段逻辑，如果判断出应用当前是运行在手机上，则需要设置对应的viewport。
if (this.isMobile()) { var viewport = document.querySelector("meta[name=viewport]"); if (viewport) {
viewport.setAttribute('content', 'width = ' + window.innerWidth + ', height = ' + window.innerHeight + ', maximum-scale = 1.25, minimum-scale = 1.25');
}
}那么如何实现isMobile函数呢？
我们打开Chrome开发者工具，在console标签页输入navigator，回车，会发现这个对象包含了非常多的有用信息。
其中有个字段platform: 我如果在安装了Windows系统的电脑上使用Chrome，该值为Win32。
另一个重要的字段为userAgent：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
下面这段不到100行的JavaScript代码通过使用正则表达式处理navigator对象中的platform和userAgent字段来判断当前前端应用运行的环境，支持Windows/Linux/Macintosh三种操作系统，iOS/Android/BlackBerry/Windows Phone等移动平台。
代码如下。您也可以在我的github上找到这段代码。执行后，会弹出检测出的运行环境和版本号。
https://github.com/i042416/KnowlegeRepository/blob/master/practice/264_getOS.html
< html >
<
script > var OS = { "WINDOWS": "win", "MACINTOSH": "mac", "LINUX": "linux", "IOS": "iOS", "ANDROID": "Android", "BLACKBERRY": "bb", "WINDOWS_PHONE": "winphone"
};var result = getOS();
alert(JSON.stringify(result));function getOS() { var userAgent = navigator.userAgent; var platform, result; function getDesktopOS() { var pf = navigator.platform; if (pf.indexOf("Win") != -1) { // 说明当前是Windows操作系统
var rVersion = /Windows NT (d+).(d)/i; var uaResult = userAgent.match(rVersion); var sVersionStr = ""; if (uaResult[1] == "6") { if (uaResult[2] == 1) {
sVersionStr = "7"; // 说明当前运行在Windows 7 中
} else if (uaResult[2] > 1) {
sVersionStr = "8"; // 说明当前运行在Windows 8 中
}
} else {
sVersionStr = uaResult[1];
} return { "name": OS.WINDOWS, "versionStr": sVersionStr };
} else if (pf.indexOf("Mac") != -1) { return { "name": OS.MACINTOSH, "versionStr": "" }; // Macintosh操作系统
} else if (pf.indexOf("Linux") != -1) { return { "name": OS.LINUX, "versionStr": "" }; // 说明当前运行在Linux操作系统
} return null;
}
platform = /Windows Phone (?:OS )?([d.]*)/; // windows phone的正则表达式
result = userAgent.match(platform); if (result) { return ({ "name": OS.WINDOWS_PHONE, "versionStr": result[1] });
} // BlackBerry 10
if (userAgent.indexOf("(BB10;") > 0) {
platform = /sVersion/ ([d.] + ) s / ; // BlackBerry的regular expression
result = userAgent.match(platform); if (result) { return { "name": OS.BLACKBERRY, "versionStr": result[1] };
} else { return { "name": OS.BLACKBERRY, "versionStr": '10' };
}
} // iOS, Android, BlackBerry 6.0+:
platform = /(([a-zA-Z ]+);s(?:[U]?[;]?)([D]+)((?:[d._]*))(?:.*[)][^d]*)([d.]*)s/;
result = userAgent.match(platform); if (result) { var appleDevices = /iPhone|iPad|iPod/; var bbDevices = /PlayBook|BlackBerry/; if (result[0].match(appleDevices)) {
result[3] = result[3].replace(/_/g, "."); return ({ "name": OS.IOS, "versionStr": result[3] }); // iOS操作系统
} else if (result[2].match(/Android/)) {
result[2] = result[2].replace(/s/g, ""); return ({ "name": OS.ANDROID, "versionStr": result[3] }); // Android操作系统
} else if (result[0].match(bbDevices)) { return ({ "name": OS.BLACKBERRY, "versionStr": result[4] }); // Blackberry
}
} //Android平台上的Firefox浏览器
platform = /((Android)[s]?([d][.d]*)?;.*Firefox/ [d][.d] * /;
result = userAgent.match(platform); if (result) { return ({ "name": OS.ANDROID, "versionStr": result.length == 3 ? result[2] : "" });
} // Desktop
return getDesktopOS();
}
<
/script>
<
/html>看完上述内容，你们掌握JavaScript中怎么判断前端应用运行环境的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
