关于物理像素和逻辑像素的疑惑

Question

老师你好，这一节我读了以后有两个疑惑，请老师解答。
1> “在开发网页的时候，写了10px，在你的设备上，逻辑1px为真实的1.2个像素大小，实际看上去为10cm，没问题，换一个设备，逻辑1px为真实的2.4个像素大小”，请问下，这个1px为1.2个像素和2.4个像素大小是怎么确定的呢？比如我怎么知道任意一款电子设备，1px到底是多少个像素的大小？
2> 关于viewport视口部分，“一般移动设备的浏览器都默认设置了一个viewport元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px”,请问下这个980px是个什么像素呢？下面的图片里面，iphone6显示的是375 * 667,这个375按照上文所说是750px的物理像素，请问下这个是怎么做到980px的呢？这也没显示滚动条啊。
另外，假如我们不加下面这句话
<meta name="viewport" content="width=device-width, initial-scale=1.0">
那么我们在切换的时候pc和移动端的时候，方块的大小明显不同了。
移动端
而切换为pc端以后，

这个红色方块明显更大了啊，而前文说到
“逻辑像素：CSS中的像素，绝对单位，保证不同设备下元素的尺寸是相同的”
这不是相互矛盾嘛？

Answer 1

西门老舅 2021-11-15 18:47:47

你好，下面我来分别对这两个问题进行回答。

1. ”在开发网页的时候，写了10px，在你的设备上，逻辑1px为真实的1.2个像素大小，实际看上去为10cm，没问题，换一个设备，逻辑1px为真实的2.4个像素大小”。

   这句话只是打个比方，并不是说真的1px就是1.2像素，只是想让大家理解，10px逻辑像素，在不同的设备下，实际大小的一样的，即阐述：逻辑像素中的px是绝对单位。

      就像PC端1个逻辑像素就是1个物理像素，而在iphone6下1个逻辑像素就是2个物理像素，那么10px不管在PC端还是移动端其实实际大小是相同的。

      这就正好引出了你的第二个问题。

  2. 这个默认的980是逻辑像素，viewport会把980的逻辑像素压缩到375的区域（当年苹果公司为了能让PC网页完全显示到移动端），所以你写的100px确实是100px逻辑像素，但是在移动端看着就是小，因为980被压缩了。这就是为啥咱们移动端一定要重置viewport的原因了，当设置了

<meta name="viewport" content="width=device-width, initial-scale=1.0">

就可以保证，375的区域放置的就是375的逻辑像素，这时你设置的100px在PC和移动端大小是相同的了。 

• 提问者 慕莱坞0998854 #1

  谢谢老师！

• 西门老舅 回复 提问者 慕莱坞0998854 #2

  不客气，理解了就好