mobile_1 物理像素

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