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

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

正文

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

  1. 当浏览器开始渲染dom树加载页面的时候,就需要拿到浏览器的信息进行判断;
  2. 那就可以确定要做的第一步就是写一个 页面加载就执行的 JS 函数。函数的作用就是帮我们拿到浏览器的信息。
 window.onload = function() { 
 	//这里面写你要干的事,不就是拿到浏览器的信息。
	var  u = navigator.userAgent;  //拿到了浏览器信息,想要的都在里面
  1. 拿到信息之后就开始进行比对呗,是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 = "你要跳转的下载链接";
   }
  1. 判断移动端特定浏览器
    此时,我们已经判断了浏览器平台信息是移动还是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>  

附上图片
在这里插入图片描述

您的支持是对博主最大的鼓励,感谢您的认真阅读!

苹果微信浏览器打开Vue页面较慢,而PC端打开较快可能是由于以下原因导致的。 首先,苹果微信浏览器作为移动端的应用程序,在处理网页渲染和加载时受到设备性能和网络状况的影响。相比于PC端浏览器移动端设备的处理能力和网络速度往往较低,导致加载速度变慢。 其次,Vue页面的加载速度也与页面的复杂程度和资源文件大小有关。如果Vue页面包含较多的组件和动态交互功能,以及大量的图像、样式和脚本文件,那么在加载和渲染过程中需要较长的时间,从而导致在移动端浏览器上的打开速度变慢。 此外,苹果微信浏览器可能存在与Vue框架的兼容性问题,导致在加载和执行Vue代码时出现异常或延迟。这可能与苹果微信浏览器的内核版本和对特定前技术的支持程度有关。 为了解决这个问题,可以考虑以下措施: 1. 优化Vue页面的性能:减少组件数量和复杂度,优化代码逻辑和性能,压缩和合并资源文件等,以提升页面加载速度。 2. 使用异步加载:对于较大的资源文件,可以采用按需加载的方式,即在需要时再动态加载,减少首次加载时的等待时间。 3. 考虑使用其他移动端浏览器:若苹果微信浏览器对Vue页面的加载表现不佳,可以尝试其他移动端浏览器,如Safari等,以获得更好的加载速度和体验。 4. 检查苹果微信浏览器版本:确保使用的苹果微信浏览器版本兼容Vue框架,并及时更新到最新版本,以避免由于旧版本的兼容性问题导致加载缓慢或异常。 总结而言,苹果微信浏览器打开Vue页面较慢与设备性能、网络状况、页面复杂度以及浏览器兼容性等因素有关。通过优化页面性能、异步加载、尝试其他浏览器以及更新应用版本等方法,可以改善页面加载速度和使用体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值