DPR匹配

本文由清尘发表于2015-11-18 15:24最后修改于2016-01-09属于移动前端分类

一个区块,设计稿上有1像素边框,当你面对不同的屏幕时你希望它的行为是怎样的?

这个场景,需求很简单,设计师希望在任何屏幕上这条线都是1物理像素。

好吧,当然这个问题的答案不是写1px那么简单。在retina屏下面,如果你写了这样的meta

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

你将永远无法写出1px宽度的东西,除此之外,inline的SVG等元素,也会按照逻辑像素来渲染,整个页面的清晰度会打折。

所以,用JS来动态写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);
}