同一個頁面在手機和電腦端各表現出不同的功能

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

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

這樣就行了，上面是電腦端，因此不用寫，他默認的就是隱藏