判断打开网址的是PC端浏览器还是移动端浏览器，是移动端判断移动端手机类型是苹果还是安卓，如果是微信打开又该如何处理。

最新推荐文章于 2024-07-29 08:30:00 发布

做想做的，

最新推荐文章于 2024-07-29 08:30:00 发布

阅读量489

点赞数 2

分类专栏： js 文章标签： android ios web app html javascript

本文链接：https://blog.csdn.net/weixin_44835297/article/details/107629691

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在各类平台上的各种浏览器和移动设备兼容的时候，需要判断设备的型号和浏览器的类型，这里使用 js 做相关判断和总结。后面我会提供完整代码，如果不需要过程的直接去最后面享用代码即可。

正文

在写代码之前我们首先要确定基本流程/思路是什么，

当浏览器开始渲染dom树加载页面的时候，就需要拿到浏览器的信息进行判断；
那就可以确定要做的第一步就是写一个页面加载就执行的 JS 函数。函数的作用就是帮我们拿到浏览器的信息。

 window.onload = function() { 
 	//这里面写你要干的事，不就是拿到浏览器的信息。
	var  u = navigator.userAgent;  //拿到了浏览器信息，想要的都在里面
｝

拿到信息之后就开始进行比对呗，是PC的还是安卓的还是苹果的还是微软的还是ipad。
这里需要提前科普一下 JavaScript indexOf() 方法。可以根据提供的值匹配字符串进行返回，不匹配则返回 -1。注意该方法区分大小写。
所以我们之后的 JS 代码可以这样写。

   if (u.indexOf('Android') > -1) {
   			alert("Android浏览器");
           window.location.href = "你要跳转的下载链接";
     } else if (u.indexOf('iPhone') > -1) {
			alert("iPhone浏览器");
 			window.location.href = "你要跳转的下载链接";
     } else if (u.indexOf('Windows Phone') > -1) {
            alert("Windows Phone浏览器");
             window.location.href = "你要跳转的下载链接";
    } else if (u.indexOf('Windows NT') > -1) {
            alert("Windows NT浏览器");
            alert("请用手机浏览器打开，PC浏览器不支持");
   }else if( u.indexOf('Linux') > -1){
            alert("Linux浏览器");
           window.location.href = "你要跳转的下载链接";
   }else if( u.indexOf('iPad') > -1){
            alert("iPad浏览器");
           window.location.href = "你要跳转的下载链接";
   }

判断移动端特定浏览器
此时，我们已经判断了浏览器平台信息是移动还是PC，移动端的就可以准备跳转对应页面了，不过仍需要判断移动端用的是不是特定类型的浏览器，比如新浪weibo客户端内置浏览器，qq客户端内置浏览器（非qq浏览器），微信内置浏览器等等。

var ua = navigator.userAgent.toLowerCase();
$(window).on("load", function() {
	var winHeight = $(window).height();
	if(ua.match(/weibo/i) == "weibo") {
		alert("是微博客户端内置浏览器");
		//是微博内置客户端，显示操作指引图，指导用户用手机自带的浏览器打开
		 $(".companion-tip").css("height", winHeight);
	     $(".companion-tip").show();
		return true;
	} else if(ua.indexOf('qq/') != -1) {
		alert("是 QQ 客户端内置浏览器");
		//是QQ内置客户端，显示操作指引图，指导用户用手机自带的浏览器打开
		 $(".companion-tip").css("height", winHeight);
	     $(".companion-tip").show();
	     return true;
	} else if(ua.match(/MicroMessenger/i) == "micromessenger") {
		alert("是 微信 客户端内置浏览器");
		//是微信内置客户端，显示操作指引图，指导用户用手机自带的浏览器打开
		 $(".companion-tip").css("height", winHeight);
	     $(".companion-tip").show();
	     return true;
	} else {
		alert("其他应用程序 客户端内置浏览器");
		 $(".companion-tip").css("height", winHeight);
	     $(".companion-tip").show();
		return false;
	}
})

拓展

在各类平台、多种浏览器、多样的移动设备兼容的时候，要根据设备、浏览器做部分调整，这里我们经常会用navigator.userAgent.toLowerCase()来进行判断。

有关浏览器类型的信息都藏在 USER-AGENT 里面，首先读取navigator.userAgent里面的信息，为了方便，利用toLowerCase方法转成小写的形式。然后用MATCH方法进行匹配版本信息

navigator是HTML中的内置对象，所有浏览器都有该对象，该对象包含有关浏览器的信息；
userAgent是navigator的属性方法，可以返回由客户机发送服务器的头部的值，作用其实就是就是返回当前用户所使用的是什么浏览器
在这里插入图片描述

toLowerCase(）是将获取到的浏览器信息转换为小写。
在这里插入图片描述

完整代码分享

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<!--适配手机-->
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>下载</title>
	<script type="text/javascript" charset="utf-8" src="../js/jquery-1.11.3.min.js">
		window.onload = function() { 
			var u = navigator.userAgent;
			if (u.indexOf('Android') > -1) {
					alert("Android浏览器");
				   window.location.href = "你要跳转的下载链接";
				   
			} else if (u.indexOf('iPhone') > -1) {
					alert("iPhone浏览器");
					window.location.href = "你要跳转的下载链接";
					
			} else if (u.indexOf('Windows Phone') > -1) {
					alert("Windows Phone浏览器");
					 window.location.href = "你要跳转的下载链接";
					 
			} else if (u.indexOf('Windows NT') > -1) {
					alert("Windows NT浏览器");
					alert("请用手机浏览器打开，PC浏览器不支持");
					
			}else if( u.indexOf('Linux') > -1){
					alert("Linux浏览器");
					window.location.href = "你要跳转的下载链接";
					
			}else if( u.indexOf('iPad') > -1){
					alert("iPad浏览器");
					window.location.href = "你要跳转的下载链接";
			}
						
		}
		
		$(window).on("load", function() {
			var winHeight = $(window).height();
			if(ua.match(/weibo/i) == "weibo") {
				alert("是微博客户端内置浏览器");
				//是微博内置客户端，显示操作指引图，指导用户用手机自带的浏览器打开
				 $(".companion-tip").css("height", winHeight);
				 $(".companion-tip").show();
				return true;
				
			} else if(ua.indexOf('qq/') != -1) {
				alert("是 QQ 客户端内置浏览器");
				//是QQ内置客户端，显示操作指引图，指导用户用手机自带的浏览器打开
				 $(".companion-tip").css("height", winHeight);
				 $(".companion-tip").show();
				 return true;
				 
			} else if(ua.match(/MicroMessenger/i) == "micromessenger") {
				alert("是 微信 客户端内置浏览器");
				//是微信内置客户端，显示操作指引图，指导用户用手机自带的浏览器打开
				 $(".companion-tip").css("height", winHeight);
				 $(".companion-tip").show();
				 return true;
				 
			} else {
				alert("其他应用程序 客户端内置浏览器");
				 $(".companion-tip").css("height", winHeight);
				 $(".companion-tip").show();
				return false;
			}     
		})
	</script>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
		}

		img {
			max-width: 100%;
			height: auto;
		}
		
		.companion-tip {
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.8);
			filter: alpha(opacity=80);
			height: 100%;
			width: 100%;
			z-index: 100;
		}
		
	</style>
</head>
 
<body>
	<div class="companion-tip">
		<p>
			<img src="../img/companion-tip.png " alt=" download" />
		</p>
	</div>
</body>
</html>