zoukankan html css js c++ java

判断终端是ios还是安卓的一些妙用（附加微信分享图标修改）

最近遇到一个项目要求有两个icon（就是下载地址下载安卓的apk 和ios的安装包）

一开始的方案是什么设备都显示这两个icon 但是后来老大说这样不好安卓用户给他下载ios 也不行 ios下载安卓也不行于是就想到了一个办法（判断终端）

于是百度了一些经测试是可以完成的

var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if(isAndroid){
        $(".down0").css('display','none')
    }else if(isiOS){
        $(".down").css('display','none')
    }
    else{
        return false;
    }

判断微信：

	function isWeiXin(){
				    var ua = window.navigator.userAgent.toLowerCase();
				    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
				        return true;
				    }else{
				        return false;
				    }
				}

代码如下应该都看得懂吧。。。。这样的话什么设备就针对什么设备显示icon 完美。。。

当你的才华撑不起你的野心的时候、请潜下心、低下头、好好学习、

现有需求：判断IOS，安卓，点击下载判断：

奇葩：小米note 用上面的判断方法显示是他妈IOS，所以

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1|| u.indexOf('MI') > -1|| u.indexOf('XiaoMi') > -1; //android终端或者uc，小米浏览器

不是安卓就是IOS，上面的IOS判断不准确

<!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" />
		<link rel="stylesheet" type="text/css" href="css/idnex.rem.css" />
		<link rel="stylesheet" type="text/css" href="css/mbox.css" />
		<script src="js/mbox.min.js" type="text/javascript" charset="utf-8"></script>
		<title>导流页</title>
		<script type="text/javascript">
			var arr = {
				'SM-M10': '_jku0000047',
				'SM-M20': '_jku0000048',
				'SM-M30': '_jku0000049',
				'SM-M31': '_jku0000050',
				'SM-M53': '_jku0000051',
				'Sogou_Mobile-M10': '_jku0000052',
				'Sogou_Mobile-M20': '_jku0000053',
				'Sogou_Mobile-M30': '_jku0000054',
				'Sogou_Mobile-M31': '_jku0000055',
				'Sogou_Mobile-M53': '_jku0000056'
			}
			var version = "2.2.6";

			function getUrl() {
				var urls = 'https://s3.weshare.com.cn/jiekuan2/apk/publish/haze_main_';
				var temp = arr[GetURLlist('utm_source') + '-' + GetURLlist('utm_campaign')];
				if(temp) {
					var myurl = urls + version + temp + "_release.apk";
					console.log(myurl);
					var downs = document.getElementById('downloads').setAttribute('href', myurl);
				} else {
					var myurl = "https://s3.weshare.com.cn/jiekuan2/apk/publish/haze_main_2.2.6_jku0000047_release.apk";
					var downs = document.getElementById('downloads').setAttribute('href', myurl);
				}
			}

			function GetURLlist(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if(r != null) return unescape(r[2]);
				return null;
			};

			window.onload = function() {
				getUrl();
				var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1|| u.indexOf('MI') > -1|| 
u.indexOf('XiaoMi') > -1; //android终端或者uc，小米等奇葩浏览器
				document.getElementById('downloads').onclick = function() {
					if(!isAndroid) {    //是IOS点击安卓下载
						$M.open({
							content: '请下载iPhone版！',
							conStyle: 'background-color:#404040; color:#fff; border:none;',
							time: 3
						});
						return false;    //阻止默认行为和冒泡
					}
				}
				document.getElementById('ios').onclick = function() {
					if(isAndroid) {     //是安卓点击IOS下载
						$M.open({
							content: '请下载Android版！',
							conStyle: 'background-color:#404040; color:#fff; border:none;',
							time: 3
						});
						return false;
					}
				}

			}
		</script>
	</head>

	<body>
		<div class="banner">
			<img src="img/banner-0.png" />
		</div>
		<div class="list">
			<div class="list-left">
				<img src="img/icon_012.png" />
			</div>
			<div class="list-right">
				<p class="money">5,433,898,641</p>
				<p class="tolks">累计成功放款金额</p>
			</div>
		</div>
		<div class="list">
			<div class="list-left">
				<img src="img/icon_013.png" />
			</div>
			<div class="list-right">
				<p class="money">2,765,434</p>
				<p class="tolks">累计成功放款人数</p>
			</div>
		</div>
		<div class="list">
			<div class="list-left">
				<img src="img/icon_014.png" />
			</div>
			<div class="list-right">
				<p class="money">75%</p>
				<p class="tolks">成功放款通过率</p>
			</div>
		</div>
		<div class="list demo">
			<div class="list-left">
				<img src="img/icon_015.png" />
			</div>
			<div class="list-right">
				<p class="money">无需抵押 无需面审</p>
				<p class="tolks">只需手机就能完成贷款</p>
			</div>
		</div>
		<div class="download">
			<a id="downloads" class="down-lf" href="https://s3.weshare.com.cn/jiekuan2/apk/publish/haze_main_2.2.6_jku0000047_release.apk">Android版下载</a>
			<a id="ios" class="down-rg" href="https://itunes.apple.com/cn/app/id1138662429?mt=8">iPhone版下载</a>
		</div>

	</body>

</html>

 * {
	padding: 0px;
	margin: 0px;
}

html {
	font-family: Microsoft Yahei, Avenir, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
	font-size: 18px;
	 100%;
	height: 100%;
}

body {
	 100%;
	height: 100%;
}

.banner {
	 100%;
	height: auto;
}

.banner img {
	 100%;
	display: block;
}

.list {
	height: 3.611111111111111rem;
	margin-top: 1.1111111111111112rem;
	border-bottom: 1px solid #efefef;
}

.list-left {
	margin-left: 1.7222222222222223rem;
	display: block;
	float: left;
}

.list-left img {
	 2.6666666666666665rem;
	height: 2.6666666666666665rem;
	display: block;
	vertical-align: middle;
}

.list-right {
	height: 2.6666666666666665rem;
	margin-left: 0.8333333333333334rem;
	display: block;
	float: left;
	position: relative;
}

.money {
	 13.88888888888889rem;
	position: absolute;
	left: 0px;
	top: -0.05555555555555555rem;
	font-size: 1.3888888888888888rem;
	color: #2187d0;
}

.tolks {
	 11.11111111111111rem;
	position: absolute;
	left: 0px;
	bottom:0px;
	font-size: 0.7777777777777778rem;
	color: #777777;
}

.demo {
	border-bottom: 1px solid #efefef;
}

.demo .money {
	font-size: 1.1666666666666667rem;
}

.demo .tolks {
	margin-top: 0.1111111111111111rem;
}

.download {
	position: fixed;
	left: 5%;
	bottom: 0.8333333333333334rem;
	 90%;
	margin: 0 auto;
	height: 3.3333333333333335rem;
	margin-top: 2.7777777777777777rem;
	margin-bottom: 0px;
}

.download a {
	text-decoration: none;
	 48%;
	height: 2.388888888888889rem;
	background: #2187D0;
	border-radius: 5px;
	line-height: 2.388888888888889rem;
	text-align: center;
	font-size: 0.9444444444444444rem;
	color: white;
}

.download a.down-lf {
	float: left;
}

.download a.down-rg {
	float: right;
}

@media only screen and (max-device-414px) {
	html {
		font-size: 18px;
	}
}

@media only screen and (max-device-375px) {
	html {
		font-size: 17px;
	}
}

@media only screen and (max-device-320px) {
	html {
		font-size: 14px;
	}
}

第二种实现方法：

<!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" />
		<link rel="stylesheet" type="text/css" href="css/idnex1.rem.css" />
		<title>导流页</title>
		<script type="text/javascript">
			window.onload = function() {
				function GetURLlist(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
					var r = window.location.search.substr(1).match(reg);
					if(r != null) return unescape(r[2]);
					return null;
				};  
				function URLPlus(version, source, campaign) {
					var urls = 'https://s3.weshare.com.cn/jiekuan2/apk/publish/haze_main_';
					this.version = version;
					this.source = source;
					this.campaign = campaign;
					this.urlplus= function (){
						if(this.source == "SM") {
							switch(this.campaign) {
								case "M10":return "47";break;
								case "M20":return "48";break;
								case "M30":return "49";break;
								case "M31":return "50";break;
								case "M53":return "51";break;
								default:return "47";break;
							}
							};
						 if(this.source == "Sogou_Mobile") {
							switch(this.campaign) {
								case "M10":return "52";break;
								case "M20":return "53";break;
								case "M30":return "54";break;
								case "M31":return "55";break;
								case "M53":return "56";break;
								default:return "52";break;
							}
						}
					}
					this.urlpluss=function(){
						if(this.source==null){
							return "https://s3.weshare.com.cn/jiekuan2/apk/publish/haze_main_2.2.6_jku0000047_release.apk";
						}
						return urls+this.version+"_jku00000"+this.urlplus()+"_release.apk";
					}
				};
				var source = GetURLlist('utm_source');
				var campaign = GetURLlist('utm_campaign');
				var myurl=new URLPlus('2.2.6', source, campaign);
				var href=myurl.urlpluss();
				console.log(href);
				var downs=document.getElementById('downloads').setAttribute('href',href);
			}
		</script>
	</head>

	<body>
		<div class="banner">
			<img src="img/banner-0.png" />
		</div>
		<div class="list">
			<div class="list-left">
				<img src="img/icon_005.png" />
			</div>
			<div class="list-right">
				<p class="money">5,433,898,641</p>
				<p class="tolks">累计成功放款金额</p>
			</div>
		</div>
		<div class="list">
			<div class="list-left">
				<img src="img/icon_006.png" />
			</div>
			<div class="list-right">
				<p class="money">2,765,434</p>
				<p class="tolks">累计成功放款人数</p>
			</div>
		</div>
		<div class="list">
			<div class="list-left">
				<img src="img/icon_007.png" />
			</div>
			<div class="list-right">
				<p class="money">75%</p>
				<p class="tolks">成功放款通过率</p>
			</div>
		</div>
		<div class="list demo">
			<div class="list-left">
				<img src="img/icon_008.png" />
			</div>
			<div class="list-right">
				<p class="money">无需抵押 无需面审</p>
				<p class="tolks">只需手机就能完成贷款</p>
			</div>
		</div>
		<div class="download">
			<a id="downloads" class="down-lf" href="https://s3.weshare.com.cn/jiekuan2/apk/publish/haze_main_2.2.6_jku0000047_release.apk">Android版下载</a>
			<a class="down-rg" href="https://itunes.apple.com/cn/app/id1138662429?mt=8">iPhone版下载</a>
		</div>

	</body>

</html>

分享图标代码：

	<title>闪电借款  56秒极速到账</title>
		<div id='wx_pic' style='margin:0 auto;display:none;'>
            <img src='img/favicon.ico' />
        </div>

查看全文

相关阅读:
《走近心理学》第一章之行为和心理学
 《解忧杂货铺》读书笔记
 追求得到之日即其终止之时，寻觅的过程亦即失去的过程。——村上
 简朴的生活、高贵的灵魂是人生的至高境界。——杨绛
 Laravel Seeder
Git的使用 checkout push merge
基于 GraphQL 构建 Laravel API —— 基本使用篇
 awk基础04-内置函数
 awk基础03-分支和循环语句
 awk基础02-变量-分隔符-数组

原文地址：https://www.cnblogs.com/libin-1/p/5870287.html