今天接到一个做客户的单子，他要求安卓、苹果、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>
