使用JS来判断页面是在手机端还是在PC端打开的方法--vue写法

最新推荐文章于 2023-01-11 10:07:08 发布

还没想好叫啥~

最新推荐文章于 2023-01-11 10:07:08 发布

阅读量619

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_52613927/article/details/123129319

版权

版权声明：本文为CSDN博主「开心大表哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a419419/article/details/78752417

HTML代码：（CSDN博主「开心大表哥」的原创）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
		<script type="text/javascript">
			function browserRedirect() {
	            var sUserAgent = navigator.userAgent.toLowerCase();
	            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
	            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
	            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
	            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
	            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
	            var bIsAndroid = sUserAgent.match(/android/i) == "android";
	            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
	            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
	            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
	                //跳转移动端页面
	                window.location.href="http://f.jcngame.com/fanfan20171208/mobile/index.html";
	            } else {
	                //跳转pc端页面
	                window.location.href="http://f.jcngame.com/fanfan20171208//fanmai/index.html";
	            }
	        }
			browserRedirect(); 
		</script>
	</head>
	<body>
		
	</body>
</html>

------------------------------------分割线----------------------------------------------------
上面是搬过来的代码，但是我是在vue中使用的，需要在PC端与移动端切换页面的宽度：
1.在div中动态绑定style样式

<div :style="{width:videoBox}"> 房号/房屋建筑面积</div>

2.vue结构中data数据里默认移动端宽度为50%

data:{
	videoBox:"50%"
}

3.methods结构中直接粘贴上面大哥的方法，改为vue的写法，然后跳转PC端时修改样式。记得要在初始化时调用该方法；

methods: {
	browserRedirect() {
		var sUserAgent = navigator.userAgent.toLowerCase();
		var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
		var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
		var bIsMidp = sUserAgent.match(/midp/i) == "midp";
		var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
		var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
		var bIsAndroid = sUserAgent.match(/android/i) == "android";
		var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
		var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
		if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
		console.log("动端页面");
		 } else {
		 //跳转pc端页面
			console.log("pc");
			this.videoBox = "25%"
		 }
},

还没想好叫啥~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JS来判断页面是在手机端还是在PC端打开的方法--vue写法

版权声明：本文为CSDN博主「开心大表哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/a419419/article/details/78752417HTML代码：（CSDN博主「开心大表哥」的原创）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫