电脑端（PC端）网页页面和移动端（手机、平板等）网页页面可显示同一页面不同内容，主要有两种实现方法，一种是设计自适应网站，例如乾元轩博客，在PC端和移动端可以自适应调整页面显示内容。另一种是给电脑端和移动端分别设计不同的页面（主体内容相同，不同显示方式）可以加入Js代码实现自适应调整。

首先介绍一下通过html+div+css实现方式。

这个方法需要在页面的meta标签中加入一句代码：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

然后在CSS中定义页面元素每个标签在不同显示器环境下是否显示。

@media screen and (max-width:350px){html{-webkit-text-size-adjust:none}
#postnavi .prev,#postnavi .next,.under{font-size:16px;}
.post .comments{position:absolute;right:0;top:39px;color:#333;font-style:normal;width:55px;font-size:11px}
.post .tu{display:none;}
}

以上代码就表示当浏览器宽度小于350px时，各标签的作用情况，例如.tu{display:none;}就表示该标签在该条件下显示器不显示。这里涉及的改动根据页面需求来定义。

其次，另一种方法是在移动端head部分放入js代码：

<script type="text/javascript">
        (function(){
            var ua = window.navigator.userAgent.toLowerCase();
            if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
               window.location.href = "电脑端的网址";
            }
            else if (ua.indexOf("iphone") > 0 || ua.indexOf("android") > 0) {
              // window.location.href = "移动端的网址";  
            } 
            }());
</script>

如果是要在电脑端head部分放入js代码：

<script type="text/javascript">
        (function(){
            var ua = window.navigator.userAgent.toLowerCase();
            if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
               //window.location.href = "电脑端的网址";
            }
            else if (ua.indexOf("iphone") > 0 || ua.indexOf("android") > 0) {
                window.location.href = "移动端的网址";  
            } 
            }());
</script>

这样，用移动端访问了电脑端的网页，就会跳转到移动端页面。同样，在电脑端访问了移动端的网页，也会跳转到电脑端的网页，方便用户浏览访问。

总结，两个方法各有所长。可以根据网页自身需要进行设置。

赏 支付宝打赏 微信打赏

新浪微博微信复制网址打印分享吧：