mobile_1 物理像素

1 物理像素css

需求: border: 1px solid red; 在移動端 dpr 爲 2 的屏幕上,其實是 2 物理像素。    如何實現 1 物理像素?html

 

首先,確定不能 border: 0.5px solid red;瀏覽器

由於 有些 PC 不支持小數 px,或者瀏覽器會將小數 px 取整,即變成 1pxapp

 

  • 原理: 讓 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);
              }());
相關文章
相關標籤/搜索