1px邊框在移動(dòng)端變粗問題產(chǎn)生的原理

我知道關(guān)于邏輯像素和物理像素相關(guān)的概念，網(wǎng)上看到的其他人的博客或者其他文章的解釋中，基本都是一句：因?yàn)樵趓etina屏（iphone4-6）中一個(gè)css像素控制著四個(gè)（2X2）物理像素，所以看起來變粗了，但！ ，根據(jù)我看到的一句話：

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現(xiàn)的大小(物理尺寸)是一致的，不同的是1個(gè)css像素所對(duì)應(yīng)的物理像素個(gè)數(shù)是不一致的。

中所說，兩個(gè)尺寸相同屏幕不同的設(shè)備上css 1px像素呈現(xiàn)的物理尺寸是一致的！如下圖所畫，視覺上看著變粗了是因?yàn)?strong>實(shí)際尺寸變粗，可兩種屏幕中css 1px代表的實(shí)際尺寸應(yīng)該是一樣的。

所以到底是為什么會(huì)變粗，百思不得其解！

回答

編輯回答

臭榴蓮

414的屏幕 dpr是3,1px = 3設(shè)備像素,設(shè)備像素是414*3 = 1242
375的屏幕 dpr是2,1px = 2設(shè)備像素,設(shè)備像素是375*2 = 750
360的屏幕 dpr是1,1px = 1設(shè)備像素,設(shè)備像素是360*1 = 360
假設(shè)手機(jī)寬度都是 80mm:
414屏 1設(shè)備像素 = 0.064412238325282mm; 1px = 0.19323671497585mm;
375屏 1設(shè)備像素 = 0.10666666666667mm; 1px = 0.21333333333333mm;
360屏 1設(shè)備像素 = 0.22222222222222mm; 1px = 0.22222222222222mm;

真的寬了？？沒有，因?yàn)椴皇沁@么比的。
設(shè)計(jì)師給你的設(shè)計(jì)圖是750的，那么對(duì)設(shè)計(jì)圖來說，1px就是1/750，就是1設(shè)備像素，而你寫border:1px,渲染出來的卻是1*dpr設(shè)備像素。是看起來比設(shè)計(jì)圖粗了。并不是在不同手機(jī)上看起來retina的比較粗。
所以設(shè)計(jì)師要的是1設(shè)備像素寬的線，而實(shí)現(xiàn)的是1css px寬的線。

2017年8月12日 11:38

編輯回答

醉淸風(fēng)

很久之前看了一篇文章，大概意思是這樣，一開始1px在retina屏中是占2個(gè)物理像素高，按理解是中間圖片這樣，可是它跨了中間的分界線，retina屏?xí)詣?dòng)補(bǔ)充上下物理像素。

2017年8月22日 13:48

編輯回答

脾氣硬

以 dpr=2 為例：
你拿到一張標(biāo)準(zhǔn)的基于 iphone6 的設(shè)計(jì)稿(750px)
你看到它設(shè)計(jì)的一個(gè) border寬度是 1px
你興致勃勃地寫下了 border: 1px solid #000;
然而 iphone6 實(shí)際渲染像素是375px，那么設(shè)計(jì)需要border的其實(shí)是 border: 0.5px solid #000;
然后你的是 1px
不是1px變粗了，只是實(shí)際只是需要0.5px而已...

2017年2月27日 02:46

編輯回答

毀憶

以前我跟你有一樣的想法，后來我才明白，因?yàn)樵O(shè)計(jì)搞1px其實(shí)需要的是0.5px,如果設(shè)計(jì)稿需要的是1px不會(huì)變粗的，0.5px才會(huì)變成1px,也就是所謂的變粗。

2018年8月11日 22:27

編輯回答

爆扎

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

講道理，粗不粗你應(yīng)該是看不出來的。

先明白什么是邏輯像素

現(xiàn)在的網(wǎng)頁
<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，將物理設(shè)備的寬度設(shè)置給當(dāng)前瀏覽器。

那么比如我是mac 屏幕的分辨率是2880 * 1800 的分辨率，但是你通過 window.screen,可以看到，瀏覽器顯示我的屏幕寬度為1440.

那么我明明是2880的像素，瀏覽器獲取到我的設(shè)備寬度也就是邏輯像素是1440.

那么你在寫網(wǎng)頁的時(shí)候，你讓一個(gè)div full-width,可以給它設(shè)置width為1440px,但是這個(gè)1440px是瀏覽器自己的邏輯寬度，瀏覽器接收到1440這個(gè)邏輯寬度之后，需要在物理屏幕上渲染，所以屏幕會(huì)將 1 個(gè)邏輯像素，渲染到 2 物理像素上。不然你就設(shè)置了1440px,難道屏幕就顯示一半？

2017年5月26日 17:13