首页 > 其他 > 详细

mobile_1 物理像素

时间:2018-11-26 01:29:24      阅读:215      评论:0      收藏:0      [点我收藏+]

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 物理像素

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!