[适配性]移动Webapp自适应方案

此次方案的优化点

• 页面元素会随宽度的变化而自适应的放大和缩小，和原来不同的是，全页面的高度、字体都会随宽度变化，保持同比例的变化，保证页面不会变形。页面样式只需要写一套CSS布局即可。
• 对于无法获取到屏幕宽度的手机（极少数个例），我们也可以通过自定义的模式添加支持

统一布局规则

1. 内部布局统一使用px作为单位，可以根据视觉稿来还原；
2. 字体也使用px，可以保持和其他的元素的相同的放缩比例，不要采用em，或者rem，因为目前没有根据device-width来设定根节点的默认字体，使用rem会随浏览器本身差异而变化，不可控；
3. 图片资源，根据设计的提供的资源情况而定。一般资源可根据宽度加载不同的图片资源的方案。icon类资源，按建光的方案，使用icon fonts；
4. 列表和表格较多，可以考虑是否需要加入Pure.css来绘制表格；

可能存在的问题

• border的宽度，设定为1px，在Retina屏幕上可能会显示2个像素。
  
• 有的宽高比不正常的手机，大部分页面可能会因为高度略高而垂直可滑动，我们的页面基本垂直都是可以滑动的，这个方案可以通过设定高度可以解决，但是也会影响显示效果。

前提准备

最初执行一段判断代码，iOS和Android平台的webkit的差异，需要区分来对待。
根据userAgent来区分设备，然后加载不同的viewport配置。

var adaptUILayout = (function(){

//根据校正appVersion或userAgent校正屏幕分辨率宽度值
var regulateScreen = (function(){
  var cache = {};

  //默认尺寸
  var defSize = {
    width  : window.screen.width,
    height : window.screen.height
  };

  var ver = window.navigator.appVersion;

  var _ = null;

  var check = function(key){
    return key.constructor == String ? ver.indexOf(key) > -1 : ver.test(key);
  };

  var add = function(name, key, size){
    if(name && key)
      cache[name] = {
        key : key,
        size : size
      };
  };

  var del = function(name){
    if(cache[name])
      delete cache[name];
  };

  var cal = function(){
    if(_ != null)
      return _;

    for(var name in cache){
      if(check(cache[name].key)){
        _ = cache[name].size;
        break;
      }
    }

    if(_ == null)
      _ = defSize;

    return _;
  };

  return {
    add : add,
    del : del,
    cal : cal
  };
})();


//实现缩放
var adapt = function(uiWidth){
  var
      deviceWidth,
      devicePixelRatio,
      targetDensitydpi,
  //meta,
      initialContent,
      head,
      viewport,
      ua;

  ua = navigator.userAgent.toLowerCase();
  //whether it is the iPhone or iPad
  isiOS = ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1;

  //获取设备信息,并矫正参数值
  devicePixelRatio = window.devicePixelRatio;
  deviceWidth      = regulateScreen.cal().width;

  //获取最终dpi
  targetDensitydpi = uiWidth / deviceWidth * devicePixelRatio * 160;

  //use viewport width attribute on the iPhone or iPad device
  //use viewport target-densitydpi attribute on the Android device
  initialContent   = isiOS
      ? 'width='+ uiWidth +', user-scalable=no'
      : 'target-densitydpi=' + targetDensitydpi + ', width='+ uiWidth+', user-scalable=no';

  //add a new meta node of viewport in head node
  head = document.getElementsByTagName('head');
  viewport = document.createElement('meta');
  viewport.name = 'viewport';
  viewport.content = initialContent;
  head.length > 0 && head[head.length - 1].appendChild(viewport);
};
return {
  regulateScreen : regulateScreen,
  adapt : adapt
};
})();
/*
 *640为当期页面指定的统一分辨率，其他分辨率下均为此分辨率的放缩变化
 */
adaptUILayout.adapt(640);

上述方法的运行结果是（Android对应nexus5，其他手机target-densitydpi会有不同）：

IOS： <meta name="viewport" content="width=640, user-scalable=no">
Android：<meta name="viewport" content="target-densitydpi=853.3333333333333, width=640, user-scalable=no">

上述方案可以解决市面上大多的手机的屏幕适配问题，但是对于有些特殊的获取不到window的width的手机，可以通过自动添加的模式加入适配方案。