同一個頁面在手機和電腦端各表現出不一樣的功能 - qishuang－IT工程師數位筆記本

文章出處

今天寫的這篇博客就是說一下同一個頁面怎么來區分電腦和手機端，以及來區分表現出不同的形式

其實很簡單，代碼很短，我說的這種方式是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>