如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）

我们部署在某些云平台或者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 10if (userAgent.indexOf("(BB10;") > 0) {platform = /sVersion/ ([d.] + ) s / ; // BlackBerry的regular expressionresult = 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] : "" });}// Desktopreturn getDesktopOS();}<
/script><
/html>

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）相关推荐

javascript 判断前端是 pc端还是移动端
javascript 判断前端是 pc端还是移动端 <!DOCTYPE html> <html lang="en"> <head>< ...
在CentOS 7最小环境下安装Cinnamon桌面环境
在CentOS 7最小环境下安装Cinnamon桌面环境 1 总体目标学习为CentOS7安装自己喜欢的GUI桌面环境.本次学习使用Cinnamon环境.这个环境是LinuxMint的 ...
javascript判断浏览器当前运行环境
认识浏览器五大国际浏览器品牌:按照全球使用率排序 Google Chrome:Windows.MacOS.Linux.Android.iOS Apple Safari:MacOS.iOS Mozil ...
html验证用户名和密码,如何用javascript判断用户名和密码是否为空？
用javascript判断用户名和密码是否为空的方法:JavaScript中可以使用(表单名.文本域名.value==''")来判断表单中用户名与密码是否为空. 用javascript判断用 ...
deepin linux 桌面环境,Linux Deepin 新桌面环境的目标
问:Linux 用户到底需要什么样子的操作系统? 对于这个问题,或许一千个人会有一千多个不同的回答,如 GNOME 项目目前在做着"平板和智能手机"方向的努力. Linux Dee ...
一键 linux桌面安装vnc,Linux OpenVZ Debian 7 32/64bit环境一键安装VNC桌面环境教程
整理教程就需要玩玩全套,在前面有分享到基于CentOS 6和Ubuntu 12.04两个环节的VNC一键安装方法且测试成功之后,还有一个我们比较常用的Debian系统,经过测试已经成功可以在Debia ...
2019linux桌面环境,GNOME 3.32桌面环境定于2019年3月13日发布
随着GNOME 3.30的出现,GNOME项目已经开始着手基于Linux的操作系统的流行桌面环境的下一个主要版本GNOME 3.32. 本周早些时候,官方宣布了GNOME 3.32桌面环境的发布时间表 ...
linux桌面环境i3,Arch Linux桌面环境-i3
在安装arch后只有命令行界面,日常使用还是相当蛋疼的,所以有了以下的一些操作~ 桌面环境选择: 显示管理器:lightdm 窗口管理器:i3wm 创建之后使用的用户: useradd -m arch ...
如何用JavaScript判断客户端浏览器是否安装了Flash插件，及其版本
注:后来知道有个swfobject的东西专门做这件事情! <SCRIPT LANGUAGE="JavaScript"> <!-- var swf = n ...

如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）

如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）相关推荐

最新文章

热门文章