I know about the concept of logical pixels and physical pixels, and in the explanation of other people’s blogs and other articles on the Internet, it’s basically a sentence: because a CSS pixel in the retina screen (iphone4-6) controls four (2X2) physical pixels, it looks rough.Now,But! ，According to a word I see:
On different screens (plain screen vs retina screen),cssThe size of the pixel (physical size) is consistent，The difference is that the number of physical pixels corresponding to the 1 CSS pixels is inconsistent.
It is said that the physical dimensions of CSS 1px pixels on two different screen sizes are identical. As shown in the picture below, it is thicker visually.Actual sizeThicker, but the actual size of CSS 1px on the two screens should be the same.
So why is it becoming thicker and more puzzled?
Take dpr=2 as an example:
You get a standard iphone6 based design draft (750px).
You see a border width that it designs is 1px
You wrote in a lively way
border: 1px solid #000;
However, the actual rendering pixel of iphone6 is 375px, so the design needs border.
border: 0.5px solid #000;
And then you are 1px
It’s not that 1px is getting thicker. It’s just 0.5px.
Let’s look at this article https://segmentfault.com/a/11…
You should not be able to see the truth and be coarse.
First understand what is a logical pixel
The present web page
<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.
To put it plainly, it is width=device-width that sets the width of the physical device to the current browser.
So, for example, I am the resolution of the MAC screen is 2880 * 1800 resolution, but you can see through window.screen, the browser shows that my screen width is 1440.
So, I obviously have 2880 pixels, and the browser gets the width of my device, that is, the logical pixel is 1440..
So when you write a web page, you let a div full-width set width to 1440px, but this 1440px is the browser’s own logical width, and when the browser receives the 1440 logical width, it needs to be rendered on the physical screen.So the screen will render 1 logical pixels to 2 physical pixels. Otherwise, you set up 1440px, do you see half the screen?
414The screen DPR is 3,1px = 3 device pixel, device pixel is 414*3 = 1242
375The screen DPR is 2,1px = 2 device pixel, device pixel is 375*2 = 750
360The screen DPR is 1,1px = 1 device pixel, device pixel is 360*1 = 360
Suppose that the width of the cell phone is 80mm:
414Screen 1 device pixel = 0.064412238325282mm; 1px = 0.19323671497585mm;
375Screen 1 device pixel = 0.10666666666667mm; 1px = 0.21333333333333mm;
360Screen 1 device pixel = 0.22222222222222mm; 1px = 0.22222222222222mm;
Really wide?? No, because it’s not the same.
The designer gives you a design diagram of 750, so for the design, 1px is 1/750, that is, 1 device pixels, and you write
border:1px,The rendering is a 1*dpr device pixel. It looks thicker than the design. It doesn’t look like retina on different phones.
So what the designer wants is a line with 1 pixels wide, and a 1css PX wide line.
A long time ago, I read an article that probably meant that at first 1px was 2 physical pixels high in the retina screen, which was understood as an intermediate picture, but it crossed the middle line, and the retina screen would automatically add up and down physical pixels.
I had the same idea as you before, and then I realized that because the design 1px actually needed 0.5px, if the design required that the 1px would not be thicker, the 0.5px would become 1px, that is, the so-called thickening.