[适配性]移动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的手机,可以通过自动添加的模式加入适配方案。

猜你喜欢

转载自myeyeofjava.iteye.com/blog/2168403

相关文章