iPhone Safari缩放分辨率

Question

我是网页设计界的新手，我开始使用HTML和CSS。我已经开始从头开始构建自己的网站了，我现在很难知道设计如何在不同的平台上扩展。

在iPhone 7上查看我的网站时，我在网上列出的分辨率为750 x 1334，我的内联块图像能够以2行的形式彼此相邻。我不明白这是怎么回事当它们被设置为具有400px的高度和宽度时是可能的。我附上了chrome dev工具的开发人员截图，以便进一步展示。 Developer tools showing the issue

我是否误解了iPhone如何显示内容？如果最大宽度分辨率为750px（根据chrome dev工具只有375px ...），它如何能够并排显示2个400px图像？

Answer 1

iPhone具有“视网膜显示屏”，其屏幕分辨率高于您在开发工具中看到的“逻辑”分辨率。

首先将图像（整个屏幕的内容）栅格化，然后将其降采样为屏幕分辨率，然后显示在物理屏幕上。

对于iPhone 7型号（以及6和8），比例因子为2。 这些型号的屏幕分辨率为750x1334，逻辑分辨率为375x667。 您可以找到其他型号here的分辨率和更多详细信息here。

对于2张宽度为400px的图像，在375px上并排显示，似乎是视口缩放的“问题”。 该html的不能在屏幕截图上看到，但是提示中的“ jumbotron”类建议您使用引导程序。可能在设置引导程序时无意中设置了视口。