今天接到一个做客户的单子,他要求安卓、苹果、PC 端打开的页面显示不同的 APP 下载链接!目前用电脑上的浏览器,android 设备,iphone,ipad 均做过测试,此代码可行,各设备判断均正确。分享给有需要的人,大牛请绕道~
HTML 代码
<div class="download link" id="downloadSHY"> <a href="苹果APP链接" id="iosdown" style="display:none">立即下载
</a> <a href="安卓APP链接" id="androiddown" style="display:none">立即下载
</a> <a href="PC端链接" id="pcdown" style="display:none">立即下载
</a> </div>
引入 jquery.min.js
百度压缩版引用地址:
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>微软压缩版引用地址:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>JS 脚本
<script> $(function() {var mobile_flag = isMobile();
// console.log(mobile_flag);
if(mobile_flag == false){ $("#phoneOrWeb").show(); $('#pcdown').show(); }else if(mobile_flag == 'iPhone'){ $('#ios').show(); $('#iosdown').show(); }else{ $('#android').show(); $('#androiddown').show();}
});
function isMobile() {var userAgentInfo = navigator.userAgent;
var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
var mobile_flag = false;
//根据userAgent判断是否是手机
for (var v = 0; v < mobileAgents.length; v++) { if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {mobile_flag = mobileAgents[v];
break;
}
}
return mobile_flag;
}
</script>专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!
