最近遇到一个项目 要求有两个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还是安卓的一些妙用(附加微信分享图标修改)的更多相关文章

  1. 判断终端是ios还是安卓的一些妙用

    最近遇到一个项目 要求有两个icon(就是下载地址 下载安卓的apk  和ios的安装包) 一开始的方案是 什么设备都显示这两个icon 但是后来老大说这样不好   安卓用户给他下载ios 也不行  ...

  2. js,h5页面判断客户端是ios还是安卓

    $(function(){ var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('An ...

  3. 判断终端是ios还是android来加载不同的样式

    <script type="text/javascript"> var addStyleLink = function(href){ var head = docume ...

  4. JS判断终端(Android IOS)

    function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || win ...

  5. 判断终端类型、微信的文章防盗链、h5页面跳转打开新的app、跳转到app市场

    判断终端的类型.安卓.ios.微信.qq function  GetMobelType()  {                 var  browser  =   {                 ...

  6. 判断当前环境是ios还是安卓

    /** * @name 判断iOS */ export const isiOS = ()=>{ let u = navigator.userAgent; let iOs = !!u.match( ...

  7. 判断客户端是iPad、安卓还是ios

    武穆逸仙 有人心疼时,眼泪才是眼泪,否则只是带着咸味的液体:被人呵护着,撒娇才是撒娇,要不然就是作死. 努力做一个可爱的人,不埋怨谁,不嘲笑谁,也不羡慕谁,阳光下灿烂,风雨中奔跑,做自己的梦,走自己的 ...

  8. php后台对接ios,安卓,API接口设计和实践完全攻略,涨薪必备技能

    2016年12月29日13:45:27    关于接口设计要说的东西很多,可能写一个系列都可以,vsd图都得画很多张,但是由于个人时间和精力有限,所有有些东西后面再补充   说道接口设计第一反应就是r ...

  9. js判断Android和Ios

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

随机推荐

  1. python3.6升级及setuptools、pip安装

    升级python3.6 1.打开官网www.python.org,找到最新3.6.3版本,复制下载链接 2.创建/app目录,wget下载到该目录下,编译安装 mkdir /app cd /app w ...

  2. Linux下web服务的搭建

    1.安装Apache Apache的官网地址为:http://httpd.apache.org/,这里以源码的方式进行安装,我们下载的版本是“httpd-2.4.25.tar.gz”,下载后的压缩文件 ...

  3. 洛谷P1420 最长连号 题解

    题目传送门 这道题我是打暴力的...(尴尬) 所以直接是O(N2)的时间,但好像没有炸,数据很水... #include<bits/stdc++.h> using namespace st ...

  4. Asp.net MVC CSS/Javascript Bundle 配置文件

    Asp.net mvc 中使用 Web Optimization 可以合并.压缩JS和CSS文件,但是每次修改都要改代码 ~/App_Start/BundleConfig.cs ,遂有了将它挪到配置文 ...

  5. jquery 上传图片自由截取

    为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.本文主要是利用jQuery的imgAreaSelect插件实现. 首先引入三个文 ...

  6. Error:Unable to make the module:***, related gradle configuration was not found. Please, re-import the Gradle project and try again.

    打开idea的 View -> Tool Windows -> Gradle.然后点击 Refresh

  7. Redis实战配置(三)

    程序配置 我们安装好了Redis的系统服务,此时Redis服务已经运行. 现在我们需要让我们的程序能正确读取到Redis服务地址等一系列的配置信息,首先,需要在Web.config文件中添加如下信息: ...

  8. ref:Manual SQL injection discovery tips

    ref:https://gerbenjavado.com/manual-sql-injection-discovery-tips/ Manual SQL injection discovery tip ...

  9. Python数据类型-元组

    元组的基本操作: 获取元素个数:len() 连接两个元组:元组1 + 元组2 复制多个元组:元组 * 复制数量 获取单个元素:元组[索引位置] 获取多个元素:元组[起始位置:终止位置:间隔数量] 获取 ...

  10. SpringBoot整合Shiro实现基于角色的权限访问控制(RBAC)系统简单设计从零搭建

    SpringBoot整合Shiro实现基于角色的权限访问控制(RBAC)系统简单设计从零搭建 技术栈 : SpringBoot + shiro + jpa + freemark ,因为篇幅原因,这里只 ...