桌面上的响应式设计模式在实际设备上的行为不同

Question

我有一个令人沮丧的 CSS 问题。我正在构建一个单页 JS 地图应用程序，并试图跨浏览器/设备同步样式。我认为我在 Safari/Firefox 中使用响应式设计模式做得很成功。当我在浏览器模拟器中在 iPad/Galaxy/iPhone/桌面之间切换时，它对我来说看起来是一样的。

然而，当我在手机上用 Firefox/Safari 实际打开页面时，它看起来并不一样。具体来说，？按钮比它下面的其余按钮宽。我特别在 CSS 中将 width 属性显式设置为 40 像素。

这里发生了什么？为什么是？按钮更宽？

以下是我的意思的一些截图：

桌面

桌面/响应模式 iPad

桌面/响应模式 iPhone

我的真实 iPhone

我尝试使用远程调试连接我的手机，但我真的不知道如何在不可视化实际手机屏幕的情况下使用它，所以我看不到我正在编辑的内容。有人有想法么？

Answer 1

我发现了问题。出于某种原因，在 iPhone 中添加了填充，而不是在响应模式或其他浏览器中。添加 padding:0 到按钮解决了这个问题。