Chrome 的开发工具、设备工具栏分辨率很奇怪

Question

我正在尝试让我的网站响应移动设备。

我听说 Chrome 的开发工具可以根据设备的分辨率来模拟设备。但 Chrome 有一些奇怪的分辨率。

苹果7

• dev-tools: 375x667px
• officially: 750x1334px

苹果7加

• dev-tools: 414x736px
• officially: 1080x1920px

尽管它们不同，但模拟器似乎相当准确，为什么？这给我带来了很大的压力，因为我不知道我的媒体查询中的最大宽度在真正的设备上是否准确。

Answer 1

开发工具中显示的分辨率不是像素而是点。它用于确保不同类型的屏幕和分辨率（例如视网膜屏幕等）之间的兼容性。

现代移动设备可以轻松达到高清分辨率，从而呈现与桌面浏览器上相同的内容。这就是Iphone 7/8 Plus宽度显示为 414 的原因。手机正在渲染内容并将其放大到实际的屏幕分辨率。这样您就可以获得全分辨率的移动视图。

您可以在此处阅读详细信息： https:
//blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/