CSS在智能手机/移动设备中有所不同答案

【问题标题】：CSS is different in smartphones/mobileCSS在智能手机/移动设备中有所不同
【发布时间】：2021-01-10 07:16:27
【问题描述】：

我正在构建一个网站，但响应式 CSS 并未像我希望的那样应用于移动设备。我希望我的网站像这样显示（由 Chrome 开发工具检查）：

但是，当我的站点部署在生产环境中时，站点的布局是完全不同的，并且在 Chrome、Safari 和 SNS 浏览器之间存在差异。

对于 Chrome

对于 Safari

对于 SNS 浏览器（在这种情况下为 FB Messenger。Slide 不同，但样式几乎对所有人都相同）

我遇到过很多这样的问题，我在 Chrome 开发工具中应用的设计在现实生活中没有应用，每次发生这种事情时，到目前为止我只是使用navigator.useragent 来检测浏览器类型和为每种类型的浏览器应用特定的 css，但我敢肯定这是一种矫枉过正。

出现这种情况，通常是因为chrome dev tools不准确，还是因为我的逻辑薄弱？有什么方法可以远程检查移动设备上的 DOM 元素（我使用的是 OSX），以便我可以检查到底发生了什么？

谢谢！

【问题讨论】：

【解决方案1】：

每个浏览器的呈现方式不同，但我认为您可能隐藏了根或正文填充或边距，我建议您通过 * {} 或 body {} 使用它们

【讨论】：

谢谢伙计。有什么方法可以远程调试您知道的移动前端样式？到目前为止，我承诺并推动每一个小改动，老实说，这是一个拖累。
你的意思是一个可以在不同设备和浏览器上显示布局的工具？
是的，但特别是比 Chrome 开发工具更准确的东西（如果有的话）。我发现 Chrome 开发工具在样式模拟方面相对不准确。
老实说，我使用了一个名为 viewport resizer 的 chrome 扩展，它有助于在移动设备上更准确地渲染，因为我知道在 chrome 开发工具中这样做的痛苦，我还听说 firefox 有比 chrome 更好的开发工具，但我没有还没用过