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);
      }());
上一篇:C++关于堆的函数


下一篇:Python with/as和contextlib上下文管理使用说明