同一个页面在手机和电脑端各表现出不一样的功能

今天写的这篇博客就是说一下同一个页面怎么来区分电脑和手机端，以及来区分表现出不同的形式

其实很简单，代码很短，我说的这种方式是js代码，可能还有其他的一些方法，我喜欢使用最便利，效果立竿见影的方法

好了，废话不多说了，先说怎么区分电脑和手机端吧。。。。来看一下代码

<script type="text/javascript"> 
    <!-- 
            //平台、设备和操作系统 
            var system = { 
                win: false, 
                mac: false, 
                xll: false, 
                ipad:false 
            }; 
            //检测平台 
            var p = navigator.platform; 
            system.win = p.indexOf("Win") == 0; 
            system.mac = p.indexOf("Mac") == 0; 
            system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
            system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
            //跳转语句
            if (system.win || system.mac || system.xll||system.ipad) { 
            
             window.location.href = "电脑要跳转的页面"; 
            } else { 
     
             window.location.href =  "手机要跳转的页面"; 
            } 
    --> 
    </script> 
</html>

这样就可以区分了，当然这句代码你要放在远程的文件里面，也就是上线的网站文件里，然后用手机和电脑分别测试才能看出效果，在本地测试是没有任何效果的

再来看如何控制一些功能

在这里举个小例子吧

比如这个

手机浏览的时候有，电脑显示的时候让他没有

先讲一下原理，就是用js来判断手机端和电脑端，手机端的时候让那个div里面的东西显示，电脑访问的时候隐藏

来看一下代码是怎么写的

div让他隐藏掉，id是ww1

然后再来看js代码

 <script type="text/javascript"> 
    <!-- 
            //平台、设备和操作系统 
            var system = { 
                win: false, 
                mac: false, 
                xll: false, 
                ipad:false 
            }; 
            //检测平台 
            var p = navigator.platform; 
            system.win = p.indexOf("Win") == 0; 
            system.mac = p.indexOf("Mac") == 0; 
            system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
            system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
            //跳转语句
            if (system.win || system.mac || system.xll||system.ipad) { 
            
     
            } else { 
     
             document.getElementById("ww1").style.display="block";   
            } 
    --> 
    </script> 

这样就好了，上面是电脑端，所以不用写，他默认的就是隐藏

 

转载于:https://www.cnblogs.com/qishuang/p/7256313.html