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