浏览器视图和实际设备之间的响应差异

【问题标题】：responsiveness discrepancy between browser view and actual device浏览器视图和实际设备之间的响应差异
【发布时间】：2020-02-07 12:11:37
【问题描述】：

我已经在浏览器上使用 Reactjs 设计了一个完全响应的网页，但是当我在真实手机上打开它时，有些东西“关闭”了，尽管我在浏览器上为同一部手机设计了它。这是为什么？我在index.html 中设置了元标记<meta name="viewport" content="width=device-width, initial-scale=1" />。这个问题在部署之前我永远不会知道它在真实设备上的样子，这既耗时又乏味。为什么会这样？

【问题讨论】：

请提供一些代码或截图以便理解

标签： html css reactjs responsive-design

【解决方案1】：

您电脑和手机上的浏览器引擎可能不一样。

您是否在两者上使用相同的浏览器？像铬？？

如果不是这样，就会有一些差异。希望对您有所帮助。

【讨论】：

其实，不，它们不一样。在我的电脑上是 Chrome，但在我的手机上是 Safari（iPhone 的默认浏览器）。所以，不同的浏览器会输出不同的东西，即使两者都支持？
是的。因为可能不支持某些 css 属性。而且对于一些本机实现，所有浏览器都使用自己的，有时有点偏离。
那么，在这种情况下，如何在部署之前知道我的设计是否适用于所有最常用的浏览器？例如，我在我的电脑上使用 Windows，据我所知，Safari 在 Windows 上不可用。
尝试使用browserling.com 测试不同的浏览器和版本。