在模拟iPhone 12的Chrome开发工具上，我的网站的部分看起来与实际的iPhone 12有点不同。为什么会这样？我已经注册了browserstack。你们认为他们能在不同的设备上准确地表示一个网站吗？你推荐其他的吗？
这是Chrome开发人员上的网站(iPhone 12(：https://snipboard.io/OpU8aj.jpg
我的iPhone 12上的同一网站：https://snipboard.io/vl6b8f.jpg
注意到与红色背景相关的类型了吗？
我也在想。。。这是我第一次使用%作为填充和边距。我通常使用em、rem或px。使用百分比是否与此有关？我知道百分比是基于父元素的。但是。。。不确定这是否与此有关。
谢谢
我也遇到了同样的问题。我了解到，我相信你们大多数人都知道，对于iPhone 8以上的任何iPhone，苹果记录的视口大小并不是显示网站或应用程序的实际像素大小(w x h(。我是在研究Apple开发文档后发现这一点的。现在有一个"；"安全区域"；在纵向模式下，或在横向模式下，为顶部和底部的本地设备按钮留出空间。从制造商记录的视口大小中减去这些按钮的面积，得到实际显示的视口或"；安全区域"；。当然，每种设备都会有所不同。
我希望我在以下方面没有违反任何规则。我用了"；我的视口是什么；https://whatismyviewport.com/在任何设备中调出这个url，它将显示该设备的实际宽度和高度，单位为px。这是您的网站或应用程序将显示的实际大小。
我现在可以使用上述信息设置新的媒体查询，而不是根据设备制造商记录的视口大小设置媒体查询。这解决了我的问题。