I wrote a simple html markup. Here it is
<!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 want to run it on a desktop dispaly 20" as if it is an iPhone5 using the crome devtools.
The red square width is set as 320 CSS pixels. I also wrote . I thought that the width of the iPhone5 will be 640 pixels. Hardware pixels. But it has only 320 pixels (WHAT PIXELS? A screen can not be measured in CSS pixels). The red square width (320 CSS pixels) is equal to iPhone width. I do not understand why is it so. I am used that my 20" display has a width of 1600 hardware pixels. And if I am writing
window.screen.widthI am getting 1600 hardware pixels. But if I am writing
window.screen.widthwhen I am emulating the iPhone5 console also says to me that the width is 320 pixels.
