关于flexible适配方案缩放视口的疑问

Question

前几天看了阿里移动端的适配方案flexible，原理很简单，根据设备dpr，来添加特定缩放值的meta viewport头部。（具体实现的代码如下）

//获取dpr值，计算缩放值

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;
}

//添加meta标签

var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
    document.documentElement.firstElementChild.appendChild(metaEl);
} else {
    var wrap = doc.createElement('div');
    wrap.appendChild(metaEl);
    documen.write(wrap.innerHTML);
}

个人理解是

例如设备的物理像素 750x1134 ，dpr=2，则css像素为375x667（即布局视口为375x667）。使用flexible后，缩放布局视口0.5倍，令布局视口达到750x1134，从而使CSS像素与物理像素达到1：1，实现高清方案。

请问这样理解对不对？缩放的是否布局视口（layout viewport）？布局视口是否对应CSS像素？如果这样理解不对，应该怎么理解？

这几天一直停滞在这里，求大神不吝赐教，感谢。

Answer 1

理解是对的。

• https://github.com/amfe/lib-f...