mobile_1 物理像素

标签：元素   tor   如何   需要   代码   nod   class   init   end   

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
                // var width = document.documentElement.clientWidth;
                
                // 页面中布局元素 * 2  
                var styleNode = document.createElement(‘style‘);
                styleNode.innerHTML = ‘html{font-size: ‘+ width/16 +‘px !important;}‘;
                document.head.appendChild(styleNode);
            }());

mobile_1 物理像素

标签：元素   tor   如何   需要   代码   nod   class   init   end   

原文地址：https://www.cnblogs.com/tianxiaxuange/p/10018214.html