1.产生这个问题的原因。
在移动端中,1px和pc端中是不一样的。这是因为window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例问题导致的。
2.解决方案:
1).用box-shadow模拟边框
doc{ box-shadow: 0 -.5px 0 0; }
2).用after伪元素实现
方案一
doc{ position:relative; } doc::after{ content:‘‘; height:1px; transform:scaleY(.5); position:absolute; top:0; left:0; right:0; background:#000; }
方案二
doc{ position:relative; } doc::after{ content:‘‘; height:.5px; position:absolute; top:0; left:0; right:0; background:#000; }