移动端1px适配问题(既解决移动端1px看起来更粗的问题)

兜兜转转又开始做移动端啦~相对于实习生时做的移动端功能,难上许多。
今天忽然就有一个想法:上家公司我学到了很多pc端的知识,这家公司我可以学习更多的移动端知识。除此之外,更要精进对Js的掌握啦。

-----------上解决方案----------

问题:1px的线框在移动端上看起来比较粗。
解决办法1(本人常用):

解析:
原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。
优点:所有场景都能满足,支持圆角(伪元素和本体都需要加border-radius)
缺点:对于已经使用伪元素的元素(例如clearfix),可能需要多层嵌套
.border{
     border-bottom:1px solid #000;
}
.border::after{
          content: '';
          position: absolute;
          pointer-events: none; /* 元素永远不会成为鼠标事件的target。 */
          top: -50%;
          bottom: -50%;
          left: -50%;
          right: -50%;
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
}

当然啦,我一直坚信实现一个功能不止一个办法,如果不是很着急追赶项目进度,可以继续看下去。

解决方法2:viewport + rem

解析:
这种兼容方案相对比较完美,适合新的项目,老的项目修改成本过大。
在devicePixelRatio = 2 时,输出viewport:
在devicePixelRatio = 3 时,输出viewport:
优点:所有场景都能满足,一套代码,可以兼容基本所有布局
缺点:老项目修改代价过大,只适用于新项目
根据屏幕大小及dpi调整缩放和大小  
(function () {
    var scale = 1.0;
    var ratio = 1;
    if (window.devicePixelRatio >= 2) {
        scale *= 0.5;
        ratio *= 2;
    }
    var text = '';
    document.write(text);
    document.documentElement.style.fontSize = 50 * ratio + "px";
})();

解决方法3:使用box-shadow模拟边框

解析:
利用css 对阴影处理的方式实现0.5px的效果
优点:代码量少,可以满足所有场景
缺点:边框有阴影,颜色变浅
.box-shadow-1px {
    box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

解决方法4:flexible.js

解析:
里面的scale值指的是对ideal viewport的缩放, flexible.js检测到IOS机型, 会算出scale = 1/devicePixelRatio, 然后设置viewport。
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

以上就是我查询资料之后总结的解决方案。那我们在来说说原因吧!


起因是移动端对上一行标签的引入,这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放。由于不同的手机有不同的像素密度。如果移动显示屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px,所以在高清屏下看着1px总是感觉变胖了

你可能感兴趣的:(移动端)