我正在尝试让我的网站响应移动设备。
我听说 Chrome 的开发工具可以根据设备的分辨率模拟设备。但是 Chrome 有一些奇怪的分辨率。
iPhone 7
dev-tools: 375x667pxofficially: 750x1334px
iPhone 7 Plus
dev-tools: 414x736pxofficially: 1080x1920px
尽管它们不同，但模拟器似乎相当准确，为什么？这真的让我感到压力很大，因为我不知道我的媒体查询中的最大宽度在真正的设备上是否准确。
答案1
开发工具中显示的分辨率不是像素但点. 它用于确保跨不同类型的屏幕和分辨率（例如视网膜屏幕等）的兼容性。
现代移动设备可轻松达到高清分辨率，从而呈现与桌面浏览器相同的内容。这就是为什么Iphone 7/8 Plus显示为 414 宽度的原因。手机正在呈现内容并将其缩放到实际屏幕分辨率。这样，您就可以获得全分辨率的移动视图。
您可以在此处阅读详细信息：
https://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/