1px边框在移动端变粗问题产生的原理

Question

我知道关于逻辑像素和物理像素相关的概念，网上看到的其他人的博客或者其他文章的解释中，基本都是一句：因为在retina屏（iphone4-6）中一个css像素控制着四个（2X2）物理像素，所以看起来变粗了，但！ ，根据我看到的一句话：

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。

中所说，两个尺寸相同屏幕不同的设备上css 1px像素呈现的物理尺寸是一致的！如下图所画，视觉上看着变粗了是因为实际尺寸变粗，可两种屏幕中css 1px代表的实际尺寸应该是一样的。

所以到底是为什么会变粗，百思不得其解！

Answer 1

以 dpr=2 为例：
你拿到一张标准的基于 iphone6 的设计稿(750px)
你看到它设计的一个 border宽度是 1px
你兴致勃勃地写下了 border: 1px solid #000;
然而 iphone6 实际渲染像素是375px，那么设计需要border的其实是 border: 0.5px solid #000;
然后你的是 1px
不是1px变粗了，只是实际只是需要0.5px而已...

Answer 2

可以看这篇文章 https://segmentfault.com/a/11...

讲道理，粗不粗你应该是看不出来的。

先明白什么是逻辑像素

现在的网页
<meta name="viewport" content="width=device-width">

意思是
Give your page a <meta name="viewport" content="width=device-width">, read out document.documentElement.clientWidth, and most browsers will give you the width of the layout viewport, which now equals the dips width.

说白了，就是width=device-width，将物理设备的宽度设置给当前浏览器。

那么比如我是mac 屏幕的分辨率是2880 * 1800 的分辨率，但是你通过 window.screen,可以看到，浏览器显示我的屏幕宽度为1440.

那么我明明是2880的像素，浏览器获取到我的设备宽度也就是逻辑像素是1440.

那么你在写网页的时候，你让一个div full-width,可以给它设置width为1440px,但是这个1440px是浏览器自己的逻辑宽度，浏览器接收到1440这个逻辑宽度之后，需要在物理屏幕上渲染，所以屏幕会将 1 个逻辑像素，渲染到 2 物理像素上。 不然你就设置了1440px,难道屏幕就显示一半？

Answer 3

414的屏幕 dpr是3,1px = 3设备像素,设备像素是414*3 = 1242
375的屏幕 dpr是2,1px = 2设备像素,设备像素是375*2 = 750
360的屏幕 dpr是1,1px = 1设备像素,设备像素是360*1 = 360
假设手机宽度都是 80mm:
414屏 1设备像素 = 0.064412238325282mm; 1px = 0.19323671497585mm;
375屏 1设备像素 = 0.10666666666667mm; 1px = 0.21333333333333mm;
360屏 1设备像素 = 0.22222222222222mm; 1px = 0.22222222222222mm;

---

真的宽了？？没有，因为不是这么比的。
设计师给你的设计图是750的，那么对设计图来说，1px就是1/750，就是1设备像素，而你写border:1px,渲染出来的却是1*dpr设备像素。是看起来比设计图粗了。并不是在不同手机上看起来retina的比较粗。
所以设计师要的是1设备像素宽的线，而实现的是1css px宽的线。

Answer 4

很久之前看了一篇文章，大概意思是这样，一开始1px在retina屏中是占2个物理像素高，按理解是中间图片这样，可是它跨了中间的分界线，retina屏会自动补充上下物理像素。

Answer 5

以前我跟你有一样的想法，后来我才明白，因为设计搞1px其实需要的是0.5px,如果设计稿需要的是1px不会变粗的，0.5px才会变成1px,也就是所谓的变粗。