电脑端与移动端网页转换自适应设置
电脑端（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>这样，用移动端访问了电脑端的网页，就会跳转到移动端页面。同样，在电脑端访问了移动端的网页，也会跳转到电脑端的网页，方便用户浏览访问。
总结，两个方法各有所长。可以根据网页自身需要进行设置。
