使用一个height为0，同时设置了border-top和border-bottom的div作为边框，解决的是一个什么样的问题？

Question

如下图所示：

感觉像是解决 retina 屏幕 1px 线的问题，可以是这border都设到2px去了,求教

链接（在移动端下打开）

Answer 1

看了你给的链接，从其中找到了这段代码

if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                var phoneScale = parseInt(window.screen.width)/640;
                if(/MZ-M571C/.test(navigator.userAgent)){
                    document.write('<meta name="viewport" content="width=640, minimum-scale = 0.5, maximum-scale= 0.5">');
                }else if(/M571C/.test(navigator.userAgent)&&/LizhiFM/.test(navigator.userAgent)){
                    document.write('<meta name="viewport" content="width=640, minimum-scale = 0.5, maximum-scale= 0.5">');
                }else{
                    document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
                }
            }else{
                document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
            }
        }else{
            document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
        }

1. 其中target-densitydpi 的属性，查了一下，它的作用的是设定1px css 像素用多少真实物理像素来渲染。

target-densitydpi有啥作用
它的作用就是缩放，跟我们设置minimum-scale，maximum-scale的作用是一样的。而且这个属性在高版本的android中是不支持的，ntot support,所以上面的script 标签中的代码写了，在android 2.3版本以下，用target-densitydpi来缩放，高于这个版本的用minimum-scale，maximum-scale来缩放。本质上是用来解决1px的问题的思路。

1. 为什么要同时设置border-top 和border-bottom 为1px？

这个问题我不太确定，我在这里胡说一下我的理解和猜测。
因为这段代码设置了viewport的width 为640px，通常情况下，移动端的屏幕宽度也就是在360px --- 414px 这个范围内，很明显这个视口宽度会大于device-width,所以这时候浏览器会先缩放.如果手机的dpi ratio是2，那么此时的1px 不是等于2个物理像素的，而是小于2个物理像素。
然后后面又设置了minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +'，根据屏幕dpi 来进一步缩放。这样子两次缩放以后，很有可能1px的线被缩放成了不足1个物理像素来渲染。所以需要再设置一个border-bottom：1px solid #fff来补偿。

Answer 2

我只找到了divider这个，没有找到你说的那个，这个的作用只是一个分割线。

Answer 3

谢谢 @BBQ只有番薯 ，非常详细。这确实是解决1px的问题，找到了这个文章：TAT.tennylv移动web适配利器-rem，其rem适配进阶里面有讲到这种方案