手机实现1像素边框显示

问题需求：页面设置边框1像素时，电脑端显示是正常的，手机端会显示比正常粗一点。
1、给需要显示1像素边框的元素添加伪类元素，设置边框为1px。注意：这个时候和直接在元素本身设置边框是一样的效果，达不到真正显示1像素的问题。

2、然后用media 媒体查询，设置伪类元素的缩放比例。

1. @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
2. .border-1px::after{
3. -webkit-transform: scaleY(0.7);
4. }
5. }
6. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
7. .border-1px::after{
8. -webkit-transform: scaleY(0.5);
9. }
10. }

 3、完整示例

1. html
2. <div class="tab border-1px"></div>
4. css
5. .tab{
6. display:flex;
7. width:100%;
8. height:40px;
9. line-height:40px;
10. position:relative;
11. }
12. .tab:after{
13. display:block;
14. position:absolute;
15. width:100%;
16. left:0;
17. bottom:0;
18. border-top:1px solid rgba(7,17,27,0.1);
19. content:'';
20. }
22. base.css
23. @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
24. .border-1px::after{
25. -webkit-transform: scaleY(0.7);
26. }
27. }
28. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
29. .border-1px::after{
30. -webkit-transform: scaleY(0.5);
31. }
32. }