关于移动端适配的几个方法，快速构建响应式网站必备知识

随着移动端的发展，手机端的页面应用越来越广泛，所以我们现在更多的是做移动端的页面。

但是我们同样要维持pc端，因此难免会遇到许多麻烦。

而且现在做移动端适配的方法也有好多种，针对不同的网站我们需要合理的判断，选择全适的方法；

第一种方法：整个页面宽高用px写死，让宽度自适应

这是最蠢的一个办法，但是实际上我们用得也挺多，它适用于一些页面结构比较复杂的网站。

我们只需要在头部加入：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

就ok了，但是它的缺陷太多，比如说有些字体会变得特别大。

对于那些页面重构太麻烦的项目，你可以选择用这种方式先顶一段时间，然后再来重做吧。

第二种方法：用js动态获取移动端页面宽度，动态自适应

这种方法的好处就是能基本保证页面在各种型号的设备上面不变形

方法就是在头部添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<script type="text/javascript">
var match,
 scale,
TARGET_WIDTH = 320;
if (match = navigator.userAgent.match(/Android (\d+\.\d+)/)) {
if (parseFloat(match[1]) < 4.4) {
  if (TARGET_WIDTH == 320) TARGET_WIDTH++;
var scale = window.screen.width / TARGET_WIDTH;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + TARGET_WIDTH + ', initial-scale = ' + scale + ', target-densitydpi=device-dpi');
   }
} else {
 document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + TARGET_WIDTH);
}
</script>

我们通过设备的分辨率来让页面自适应，会更精确

第三种方法：rem布局，把所有单位用rem代替

这样的页面在移动端运行完全没有问题，我们首先通过获取移动设备的宽度来动态计算html的font-size的值。

通常我们将font-size的默认值设为100px,这样更利于换算，我们就可以把所有的px单位直接除以100.。来算出我们需要设置的值。

同样我们需要在头部写一段js来进行计算：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<script type="text/javascript">
new function (){
 var _self = this;
_self.width = 640;//设置默认最大宽度
_self.fontSize = 100;//默认字体大小
_self.widthProportion = function(){
var p = (document.body&&
  document.body.clientWidth ||
  document.getElementsByTagName("html")[0].offsetWidth)/_self.width;
  return p>1?1:p<0.5?0.5:p;
};
_self.changePage = function(){
    document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
}
_self.changePage();
window.addEventListener("resize",function(){_self.changePage();},false);
};

</script>

三目运算大家可能用得不是很多

return p>1?1:p<0.5?0.5:p;

这句话的意思是把p的值控制在0.5到1之间，当然我们也可以让它大于1，这样就可以在pc端满屏显示了。

但是整个界面会被拉长，会变得很丑，所以我们选择不这样做。

用rem布局自适应是一件很爽的事情，可是它的缺点就是在pc端，某些低端浏览器会不支持，但在手机上跑是完全没压力的。

第四种方法：flexbox布局，用弹性盒子的方式，达到响应式效果

这个也是比较常用的，属于css3的内容，当然也存在着pc端某些浏览器不支持的问题。

这个对于结构简单点的页面来说，比rem会显得更加好用，大家可以去网上学习一样相关的知识，

现在的主流混合开发框架都支持使用flexbox布局。特别是react-native.。

第五种方法：传统做法，页面跳转

想通过一种方法完全完美地适应各个平台，要遇到的坑还是挺多的，所以现在依然会有一些人采用两套代码的形式进行移动端适配

要想在pc端的项目可以直接达到适配IE6.。移动端页面又可以完美展现，你必须要维护两套代码。

我们可以在pc端主页面的头部加入这样一段js代码：

<script type="text/javascript">
function checkBrowser() {
           var sUserAgent = navigator.userAgent.toLowerCase();
           var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
           var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
           var bIsMidp = sUserAgent.match(/midp/i) == "midp";
           var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
           var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
           var bIsAndroid = sUserAgent.match(/android/i) == "android";
           var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
           var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
           if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {

               location.replace("http://www.baidu.com"); //如果是移动端，就打开百度
           }
       }
    checkBrowser();
  
</script>

页面中我们可以看到，如果是移动端，我们可以实现自动跳转页面，而且在头部运行的js并不会在加载完页面之后执行，

整个过程用户完全感觉不到，可以达到很好的用户体验 。

以上就是我个人总结的移动端适配，纯属个人经验，其中有误，还望指出。