公告
  
重要通知:网站网络变更中可能出现站点图片无法加载的问题,点击此处可解决!
更多资讯可访问:点击查看消息详情!

朕已阅

html+js智能判断客户端并显示不同内容

admin 千秋月 关注 管理组 论坛神话
发表于程序代码版块 技术杂文

通过http+js代码实现智能判断pc端,手机端(苹果,安卓)并根据不同的客户端显示不同的内容!目前用电脑上的浏览器,android 设备,iphone,ipad 均做过测试,此代码可行,各设备判断均正确,喜欢的同学可以来看看哦!


教程

以下html代码加入网页的<body></body>之间

<div class="download link" id="downloadSHY">
  <a href="苹果端链接" id="iosdown" style="display:none">
    立即下载
  </a>
  <a href="安卓端链接" id="androiddown" style="display:none">
    立即下载
  </a>
  <a href="pc端链接" id="pcdown" style="display:none">
    立即下载
  </a>
</div>
加入以下JS代码

<script type="text/javascript">
$(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>
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

评论列表 评论
发布评论

评论: html+js智能判断客户端并显示不同内容



点击进入免费吃瓜群!吃大瓜! 广告位支持代码、文字、图片展示 Image


免责声明
本站资源,均来自网络,版权归原作者,所有资源和文章仅限用于学习和研究目的 。 不得用于商业或非法用途,否则,一切责任由该用户承担 !

请求资源或报告无效资源,请点击[反馈中心]


侵权删除请致信 E-Mail:chengfengad@gmail.com
已有0次打赏
(0) 分享
分享
取消