关于lib-flexible源码阅读的一些疑问

19sam91
  • 33

最近看到一篇关于终端适配的文章,了解到通过js计算获得html的font-size来影响rem可以适配到多种终端,
但是看了一下lib-flexible的源码,不是特别的理解作者除了计算除了rem还计算了dpr并且根据dpr设置了
initial-scale

 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');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

所以想请教一下各位,计算dpr并根据dpr求initial-scale是为了什么

回复
阅读 3.9k
2 个回答

文档有说明的吧~~~
dpr 是根据 Android iOS== 设备来定义
用于 css 设置文字 px 大小

selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

链接 http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?plg_nld=1&from=groupmessage&plg_uin=1&plg_auth=1&plg_usr=1&plg_dev=1&plg_nld=1&plg_vkey=1&isappinstalled=0

比如在dpr是2的手机上,[data-dpr="2"] .a字体为24px,又因为页面缩放0.5,字体为还是12px。。这就是设置initial-scale的原因

宣传栏