1 物理像素
需求: border: 1px solid red; 在移动端 dpr 为 2 的屏幕上,实际上是 2 物理像素。 如何实现 1 物理像素?
首先,肯定不能 border: 0.5px solid red;
因为 有些 PC 不支持小数 px,或者浏览器会将小数 px 取整,即变成 1px
- 原理: 让 css 面积减小,initial-scale = 0.5,布局视口变大
- 需要解决的问题是,元素的 width margin 这样的布局 px 变小了?
- 解决: 使用 rem 适配 乘回来就好了
- 具体代码
(function(){
var width = document.documentElement.clientWidth; // 屏幕宽度 375 var dpr = window.devicePixelRatio; // 获取 dpr
var scale = 1/dpr; // 获取实现 1 像素的比例 0.5 // 通过系统缩放 initial-scale=0.5
var metaNode = document.querySelector('meta[name="viewport"]');
metaNode.setAttribute('content','width=device-width,initial-scale='+ scale +',user-scalable=no') // 此时获取布局视口为 750px
width = document.documentElement.clientWidth; // 页面中布局元素 * 2
var styleNode = document.createElement('style');
styleNode.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
document.head.appendChild(styleNode);
}());