根据user-agent判断客户端是PC、安卓、苹果显示不同内容

前端之家收集整理的这篇文章主要介绍了根据user-agent判断客户端是PC、安卓、苹果显示不同内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家,也给大家做个参考。

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

以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

原文链接:https://www.f2er.com/html/536364.html

猜你在找的HTML相关文章