H5案例分享:使用JS判断客户端、浏览器、操作系统类型
一、JS判断客户端类型
JS判断客户端是否是iOS或者Android手机移动端
通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端。
核心代码如下:
方法一:
var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isAndroid) { alert('这是Android'); } if (isiOS) { alert('这是IOS');
}
扫码体验:
方法二:
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //alert(navigator.userAgent); alert('这是IOS'); } else if (/(Android)/i.test(navigator.userAgent)) { //alert(navigator.userAgent); alert('这是Android'); } else { alert('这是PC'); }; 扫码体验:
![H5案例分享:使用JS判断客户端、浏览器、操作系统类型_第2张图片](https://img.16lz.com/image/info8/3f89a72435ca4bba9a60256eb306e2c3.jpg)
二、JS检测是否在微信打开
使用js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息,那么我们也可以通过该方法来获取微信内置浏览器的相关信息。根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。
核心代码如下:
function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=='micromessenger') { alert('在微信里打开'); } else { alert('不在微信里打开'); } } is_weixn(); 扫码体验:
![H5案例分享:使用JS判断客户端、浏览器、操作系统类型_第3张图片](https://img.16lz.com/image/info8/8829a329059c49c5bb3932f2951453e4.jpg)
三、JS判断操作系统类型
在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性,比如:我们有一个网站, 在Windows下浏览效果良好,但是到了Linux下,由于许多特性不同,会造成在浏览上的细微差异,甚至会影响到良好的用户体验。这个时候我们就需要利用 Javascript对操作系统的类型以及某些特性进行判断,分而治之,从而实现网站在跨平台浏览时候保持良好的用户体验。
下边是对Windows、Mac、Linux、Unix擦作系统进行判断的JS核心代码:
function detectOS() {
var sUserAgent = navigator.userAgent;
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
if (isMac) return "Mac";
var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
if (isUnix) return "Unix";
var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
if (isLinux) return "Linux";
if (isWin) {
var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 ||sUserAgent.indexOf("Windows 2000") > -1;
if (isWin2K) return "Win2000";
var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
if (isWinXP) return "WinXP";
var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
if (isWin2003) return "Win2003";
var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
if (isWinVista) return "WinVista";
var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
if (isWin7) return "Win7";
}
return "other";
}
alert("您的操作系统是:" + detectOS());
扫码体验:
![H5案例分享:使用JS判断客户端、浏览器、操作系统类型_第4张图片](https://img.16lz.com/image/info8/685512cbdda642c58f9c329672b5ddd0.jpg)
更多相关文章
- android客户端百度云推送的使用总结
- 今天开始写android的照片浏览器(一)至返回所有图片文件
- android 消息机制与仿新闻客户端
- Emlog博客Android客户端发布
- 仿爱乐透android客户端界面实现(附工程源码)
- Android源码下载之《Android新闻客户端源码》