I wrote simple code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta id="meta" name="viewport" content="width=device-width"> <style> *{ margin:0px; padding:0px; } #div{ height:91px; width:320px; background-color:red; display:inline-block; } body{ background-color:black; text-align:center; } </style> </head> <body> <div id="div">hello</div> </body> </html>

I have a 20 inch monitor, I want to emulate on it, as the iPhone displays. To do this, I go to Devtuls and switch to the phone icon - adaptive layout.

The width of the red square in CSS-pixels is 320. I thought that the width of the iPhone 5 is 640 pixels - “iron” pixels. But it gave out only 320 which pixels it is not clear. What is this number? It turns out that the red square with a width of 320 CSS-pixels is equal to the width of an iPhone 5 with a width of 320 some (ANY - iron pixels, KCC-pixels or dip-pixels?) Pixels. Why is that? I used to work on a 20 inch monitor, and when I write window.screen.width, I get 1600 pixels of iron. But, emulating iPhone 5, I write window.screen.width and get again the same 320 pixels. enter image description here

    3 answers 3

    There is a concept of a hardware pixel that has a different size on different devices. but there is a concept of hardware-independent (the one that has the same size on different devices), here is the last 320 px. and 620 is how many physical pixels is the width of the smartphone. more details:

    https://habrahabr.ru/post/145619/

    • I do not understand how two types of optical pixels can be used at the same time - CSS pixels and dip pixels. window.screen.width produces, as far as I understand, 320 dip-pixels, if you emulate iPhone 5 in devtuls. - Dimon

    You can also take a look at this article where you can see clearly in the illustrations how from 320x568 points you get an image on physical 640x1136.

    In short - initially there is an abstract display with abstract coordinates (points). They are then rendered in pixels on the physical device. These coordinates are multiplied by a factor (x1 for iPhone 2G, 3g, 3GS; x2 iPhone 4, 4s, 5, 5C, 5S, SE, 6, 6S; x3 iPhone 6 / 6S Plus. Soon the list will be updated with new models) and our physical display resolution. In some cases, after multiplication, then the image is reduced.

    • I do not understand how two types of optical pixels can be used at the same time - CSS pixels and dip pixels. window.screen.width produces, as far as I understand, 320 dip-pixels, if you emulate iPhone 5 in devtuls. - Dimon

    Please carefully read the answers to your previous questions:

    And also my answer to this question:

    In particular, in the responses you will see that:

    Take an iPad with a retina display. Its actual width in the vertical position is 1536 pixels . But the screen size is the same as that of the non-retina version. Therefore, for CSS, the device leaves half as many pixels as they actually are - 768 in width .

    I highly recommend that you throw away what you are reading and switch to another book or tutorial - because this tutorial has caused you confusion in terms and prevents normal development in layout.