下面是html代码。
<html>
<head>
<style type="text/css">
.my {
border: 2px solid;
width: 414px;
height: 500px;
}
.right {
text-align: right
}
</style>
</head>
<body>
<h2>this is the ...</h2>
<div class="my">abc</div>
<div class="right">this is the right</div>
</body>
</html>
你可以看到 414 像素的 div 在那里
我知道 devicePixelRatio 是 3，所以实际宽度的像素大约是 414 * 3 像素。但是当我在css中设置宽度为414像素时，为什么它占据了大约2/5的宽度？ css 像素如何映射到实际像素？
另附。
为什么我需要设置960px来填满iphone 6plus的宽度？
最佳答案
您必须使用 viewport metatag 来控制移动设备上的布局。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
有关 viewport 的更多帮助，请阅读此 Using the viewport meta tag to control layout on mobile browsers
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.my {
border: 2px solid;
width: 414px;
height: 500px;
}
.right {
text-align: right
}
</style>
</head>
<body>
<h2>this is the ...</h2>
<div class="my">abc</div>
<div class="right">this is the right</div>
</body>
</html>关于css - css px 单位如何映射到实际设备像素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47746340/