判断终端是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;

	width: 100%;

	height: 100%;

}

body {

	width: 100%;

	height: 100%;

}

.banner {

	width: 100%;

	height: auto;

}

.banner img {

	width: 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 {

	width: 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 {

	width: 13.88888888888889rem;

	position: absolute;

	left: 0px;

	top: -0.05555555555555555rem;

	font-size: 1.3888888888888888rem;

	color: #2187d0;

}

.tolks {

	width: 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;

	width: 90%;

	margin: 0 auto;

	height: 3.3333333333333335rem;

	margin-top: 2.7777777777777777rem;

	margin-bottom: 0px;

}

.download a {

	text-decoration: none;

	width: 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-width:414px) {

	html {

		font-size: 18px;

	}

}

@media only screen and (max-device-width:375px) {

	html {

		font-size: 17px;

	}

}

@media only screen and (max-device-width: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>

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

判断终端是ios还是安卓的一些妙用
最近遇到一个项目要求有两个icon(就是下载地址下载安卓的apk 和ios的安装包) 一开始的方案是什么设备都显示这两个icon 但是后来老大说这样不好安卓用户给他下载ios 也不行 ...
js，h5页面判断客户端是ios还是安卓
$(function(){ var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('An ...
判断终端是ios还是android来加载不同的样式
<script type="text/javascript"> var addStyleLink = function(href){ var head = docume ...
JS判断终端(Android IOS)
function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || win ...
判断终端类型、微信的文章防盗链、h5页面跳转打开新的app、跳转到app市场
判断终端的类型.安卓.ios.微信.qq function GetMobelType() { var browser = { ...
判断当前环境是ios还是安卓
/** * @name 判断iOS */ export const isiOS = ()=>{ let u = navigator.userAgent; let iOs = !!u.match( ...
判断客户端是iPad、安卓还是ios
武穆逸仙有人心疼时,眼泪才是眼泪,否则只是带着咸味的液体:被人呵护着,撒娇才是撒娇,要不然就是作死. 努力做一个可爱的人,不埋怨谁,不嘲笑谁,也不羡慕谁,阳光下灿烂,风雨中奔跑,做自己的梦,走自己的 ...
php后台对接ios，安卓，API接口设计和实践完全攻略，涨薪必备技能
2016年12月29日13:45:27 关于接口设计要说的东西很多,可能写一个系列都可以,vsd图都得画很多张,但是由于个人时间和精力有限,所有有些东西后面再补充说道接口设计第一反应就是r ...
js判断Android和Ios
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

随机推荐

ubuntu16.04 安装 python3.6, 并创建虚拟环境（使用python3.6）
ubuntu16.04 安装 python3.6, 并创建虚拟环境(使用python3.6) ubuntu16.04中默认安装了 python2.7 python3 python3.5.2 (注意 : ...
Linux创建ftp并设置权限以及忘记ftp帐号（密码）修改
忘记ftp密码修改方法: 1.登录服务器 cd /etc/vsftpdcat ftpusers找到对应的ftp用户名 (如果用户名也忘记了那么 cd /etc 然后cat passwd 查看用户和 ...
C语言调用正则表达式
标准的C和C++都不支持正则表达式,但有一些函数库可以辅助C/C++程序员完成这一功能,其中最著名的当数Philip Hazel的Perl-Compatible Regular Expression库 ...
MVC – 7.Razor 语法
7.1 Razor视图引擎语法 Razor通过理解标记的结构来实现代码和标记之间的顺畅切换. @核心转换字符,用来标记-代码的转换字符串. 语境A: @{ string rootName=&quo ...
使用qt+visa实现程控
曾经在如何使用VS2010调用visa进行程控中使用vs2010+visa 实现了程控最简单的Demo,现实现Qt实现visa的Demo ===== 本人诚接各种程控开发项目 ===== 软件环境系 ...
【LOJ】#2173. 「FJOI2016」建筑师
题解蒟蒻只会$O(nAB)$的dp= = 那么先说答案 $S_{u}(n - 1,a + b - 2) * \binom{a + b - 2}{a - 1}$ 其中\(S_{u}(n,m)\ ...
十使用dict和set
dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 举个例子,假设要根据同学的名字 ...
Python加密模块-pycryptodome
这个模块可以避开Pycrypto安装时带来的一系列包依赖问题. 安装命令: pip install pycryptodome 使用实例: from Crypto.Cipher import AES k ...
Kail Linux渗透测试教程之Recon-NG框架
Kail Linux渗透测试教程之Recon-NG框架信息收集信息收集是网络攻击最重要的阶段之一.要想进行渗透攻击,就需要收集目标的各类信息.收集到的信息越多,攻击成功的概率也就越大.本章将介绍信 ...
CF336B[思维题]
题目链接[http://codeforces.com/problemset/problem/336/B] 题意:画出2*m个圆圈,编号为1-m的圆圈在同一行相邻,编号在m+1-2*m的圆圈在同一行,有 ...

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

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

随机推荐

热门专题