移动端开发规范以及基础总结（速记）

移动设备的基础知识:

1 ios设备：

px：物理,分辨率相关，硬件设备。分辨率越大显示的细节越丰富。

pt：逻辑，连接物理和软件的中介。pt,point

ppi：每英寸px的数量 ，视网膜屏是ppi超过300的屏幕，iphone4开始

1.1 苹果设备以及分辨率

设备	屏幕尺寸	分辨率(pt)	Reader	分辨率(px)	渲染后	PPI
iPhone 3GS	3.5吋	320x480	@1x	320x480		163
iPhone 4/4s	3.5吋	320x480	@2x	640x960		330
iPhone 5/5s/5c	4.0吋	320x568	@2x	640x1136		326
iPhone 6	4.7吋	375x667	@2x	750x134		326
iPhone6 Plus	5.5吋	414x736	@3x	1242x2208	1080x1920	401

2 android设备：

px：同上

dp：同上pt

sp:测量空间点密度的单位，单位英寸上点的个数

dpi：同上ppi

2.1  安卓屏幕尺寸关系:
1 1dp=1px mdpi(常见分辨率: 320*480)
1.5 1dp=1.5px hpi(常见分辨率:480*800)
2 1dp=2px xhdpi(常见分辨率：720*1280)
3 1dp=3px xxhdpi(常见分辨率:1080*1920)
4 1dp=4px xxxdpi(常见分辨率:2560*1440)

3 pt和px的对应关系以及常见设备：

1倍：1pt=1dp=1px（mdpi、iPhone 3gs）

1.5倍：1pt=1dp=1.5px（hdpi）

2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）

3倍：1pt=1dp=3px（xxhdpi、iPhone 6）

4倍：1pt=1dp=4px（xxxhdpi）

4  DPR与分辨率的关系：

css中的px等同于pt，是虚拟的点，逻辑单位。不同的缩放比，pt(css像素)占的实际像素不一样。

css中像素px / 缩放比=实际的像素px

举例：（设置相同的px样式，在不同的设备上相识效果）

上图很明显的说明，设置相同px在不同设备上的显示效果。

有两点需要分清：

1  我们所说的显示效果实际上物理世界的显示效果，也就是说换算成尺寸，最直观的效果。

2  这种显示的差异，实际上是不同设备对css px的理解不同造成的。也就是说在不同的设备上此css px不同于彼css px

怎么解决这种差异？

1 统一css px设备之间的px的解释，css中1px对应实际设备的1px。

2 在1的基础上，构建逻辑尺寸。bing go......,解决问题:)。两个问题都统一了之后，就很容易解决这个问题了。仔细想想，我们所谓看到的

显示效果一致，是不是就是宽度高度的比例一致，也就是物理尺寸中的宽度和高度等比。

解决方式rem

这种解决方式，也就是说在dpi和ppi之间构建一个统一的逻辑单位。

背景知识：

1 rem（相对于根元素的尺寸）。

2 viewport 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no,initial-scale">
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

3  理想视口的尺寸,屏幕的设备像素尺寸

布局视口：document.document.clientWidth

视觉视口：window.innerWidth
获取根元素的宽度：window.document.documentElement.getBoundingClienRect().width;

获取物理尺寸和理想视口的比例：window.devicePixelRatio
（screen.width有严重的兼容性问题，获取有可能是设备的宽度，也可能是理想视口的尺寸）

4 viewport的设置和rem的基准值设置。

;(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    if (metaEl) {
        console.warn('将根据已有的meta标签来设置缩放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);//获取缩放比
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
        }
    }
    //不设置属性的时候
    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    //未设置meta属性的时候
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        //TODO：添加width属性,修改，需要测试
        //metaEl.setAttribute('content',isAndroid ? 'width=device-width, ' : '' + 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }
    //初始化rem
    function refreshRem(){
        //获取根元素的宽度
        var width = docEl.getBoundingClientRect().width;
        //>540 1080*s1920
        /*
         这个540其实是个经验值，或者最大值，这个经验是怎么得出来的呢？
         目前主流手机最大的css像素尺寸，是540（比如devicePixelRatio为2，分辨率是1080x1920的手机），所以用了这个经验值。
         这样可以让在ipad横屏这种情况下浏览无线页面，不至于因为拉伸适配后体验太差。
         */
        if (width / dpr > 540) {//处理横屏的页面拉伸，宽度>1080的情况下，以1080为准
            width = 540 * dpr;
        }
        var rem = width / 10;//宽度10等分
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

    //重置的时候刷新
    //var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    win.addEventListener("resize", function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    // body上设置12 * dpr的font-size值，为了重置页面中的字体默认值，不然没有设置font-size的元素会继承html上的font-size，变得很大
    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }

    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));

4 设计图和rem的转化：

   750px宽度的设计图，基础单位 a = 750/10; 把a看成1rem,30*40px=30/75 * 40/75 = 0.4*0.53rem

5 字体的特别说明：

   较宽的设备当然希望显示字数更多，用rem不好，可以根据缩放比，设置字体的大小。

   标准(中等屏幕@2):30px----->3倍缩放比 ,30px/2*3=45px---->1倍的缩放比，30px/2=15px;

5 手动转换计算还是自动计算

 可以用less混合，当然只是相对简单了。sass应该会更好。

@p2r:720/10;//设计图设置
.px4dpr(@pro,@val){//根据dpr的变化调整px,这是以中等分辨率750px设计图为准
  [data-dpr="1"] &{
    @{pro}:@val/2;
  }
  [data-dpr="2"] &{
    @{pro}:@val;
  }
  [data-dpr="3"] &{
    @{pro}:@val/2*3;
  }
}
.px2rem(@pro,@val){//px计算rem ,设计图高度30px=> px2rem(height,30rem)
  @{pro}:@val/@p2r;
}