Css 该网站在实际移动设备上的外观与在桌面上使用伪造的用户代理不同

我正在学习HTML和CSS。我在[已不存在，抱歉。经验教训：发布代码]创建此网站

当我在iPhone或iPad上查看该网站时，底部的三幅图像是垂直堆叠的。当我在Chrome上使用开发者工具或“Chrome用户代理切换器”（插件）或mobiletest.me（网站）查看网站，并模拟iPhone或iPad时，图像会水平显示，可能会被压扁

垂直堆叠更有用，但（1）我想知道如何在没有物理设备的情况下在iPhone、iPad等上可靠地测试我的网站，（2）我也想知道为什么这些工具和服务与他们正在模拟的设备不一致

---

更新：事实上，准确地模拟了实际的设备，但是你能回答我的第二个问题吗？我希望能够依赖Chrome开发者工具。

这些工具不是为了“模拟”，而是为了传递任何可能出于任何原因（条件CSS等）嗅探用户代理的站点的相关用户代理字符串。Browserstack.com或物理设备本身是一致测试站点的可靠方法，但要付出代价。

是否有三个因素在起作用（1）用户代理字符串，（2）屏幕大小，（3）浏览器，例如iOS Safari？你是说像Chrome开发工具这样的工具可以处理（1）和（2），但对于（3），我需要更多的“能力”。