这个是什么像素？

图片描述
为什么不是物理像素？

weixin_慕尼黑0465866 2023-03-23

源自：移动Web开发入门 2-5 视口--viewport-2

收起

1回答

好帮手慕久久 2023-03-23 11:22:55

同学你好，解答如下：

1、没有为什么，浏览器就没有把此处设置成物理像素，所以我们没法把它当成物理像素去看。比如iphone4的物理像素是960*640，但是模拟器中是480*320。

2、不用管什么物理像素、css像素，就简单把它看成“页面设置了视口后（不考虑dpr），移动设备上html的页面宽”就行。比如：

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
  <title>视口</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: red;
    }
  </style>
</head>
 
<body>
</body>
 
</html>

该页面设置了视口，那么整个页面宽高如下：

按照这个尺寸，我们可以对比设计稿，设置元素尺寸。

祝学习愉快！

收起回答

提问者 weixin_慕尼黑0465866 #1

为什么这里说的浏览器显示的是物理像素？？

2023-03-23 12:18:21
好帮手慕久久回复提问者 weixin_慕尼黑0465866 #2

解答如下：
习题说的是“手机逻辑像素”，它和“物理像素”不是一个概念：
“物理像素”是我们说的“分辨率”。

2023-03-23 13:12:48
提问者 weixin_慕尼黑0465866 回复好帮手慕久久 #3

手机逻辑像素跟视频讲的 CSS像素是同一个？如果是同一个的话，为什么公式上面还有CSS逻辑像素？？

2023-03-23 14:46:12