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

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

其实很简单，代码很短，我说的这种方式是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>

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