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

通过http+js代码实现智能判断pc端，手机端（苹果，安卓）并根据不同的客户端显示不同的内容！
目前用电脑上的浏览器，android 设备，iphone，ipad 均做过测试，此代码可行，各设备判断均正确
以下html代码加入网页的＜body＞＜/body＞之间

1. <div class="download link" id="downloadSHY">
   
2.   <a href="苹果端链接" id="iosdown" style="display:none">
   
3.     立即下载
   
4.   </a>
   
5.   <a href="安卓端链接" id="androiddown" style="display:none">
   
6.     立即下载
   
7.   </a>
   
8.   <a href="pc端链接" id="pcdown" style="display:none">
   
9.     立即下载
   
10.   </a>
    
11. </div>

复制代码

加入以下JS代码：

1. <script type="text/javascript">
   
2. $(function() {
   
3.   var mobile_flag = isMobile();
   
4.   // console.log(mobile_flag);
   
5.   if(mobile_flag == false){
   
6.     $("#phoneOrWeb").show();
   
7.     $('#pcdown').show();
   
8.   }else if(mobile_flag == 'iPhone'){
   
9.     $('#ios').show();
   
10.     $('#iosdown').show();
    
11.   }else{
    
12.     $('#android').show();
    
13.     $('#androiddown').show();
    
14.     }
    
15. });
    
16. function isMobile() {
    
17.   var userAgentInfo = navigator.userAgent;
    
18.     var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
    
19.     var mobile_flag = false;
    
20.     //根据userAgent判断是否是手机
    
21.     for (var v = 0; v < mobileAgents.length; v++) {
    
22.       if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
    
23.         mobile_flag = mobileAgents[v];
    
24.         break;
    
25.       }
    
26.     }
    
27.     return mobile_flag;
    
28. }
    
29. </script>
    
30. <script type="text/javascript" src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

复制代码

很好，技术贴。

圆月弯刀 发表于 2024-9-26 12:00
很好，技术贴。

必须的