为什么我的响应代码在 iPhone 上与缩小窗口相比看起来不同？答案

【问题标题】：Why does my responsive code look different on an iPhone compared to slimming window down?为什么我的响应代码在 iPhone 上与缩小窗口相比看起来不同？
【发布时间】：2020-07-21 12:16:27
【问题描述】：

我目前正在利用业余时间开发一个小模板。我目前正在做事情的响应方面。我拥有一部 iPhone X，并用它来检查我的网站的响应速度。

网址：https://donnieberry97.github.io/AgencyTemplate/

回购：https://github.com/donnieberry97/AgencyTemplate/

截图：

如您所见，我同时使用 Chrome 和 iPhone X 上的响应性工具进行比较。我在 chrome 工具上选择了 iPhone X，网站看起来不错。

但是，一旦我将它加载到真正的 iPhone X 上。我在标题上的间距似乎消失了，并且按钮被推到了 div 之外。

我在这里做错了吗？我已尝试多次调整窗口大小，但仍无法复制手机显示的内容。

【问题讨论】：

Chrome 工具不使用 Apple 工具包来呈现页面，它只是使响应式窗口的大小与 iPhone 相同，因此您的 CSS 上可能有一些 Apple 工具包无法识别的属性
仍然在搞乱它，但我一生都无法找出问题所在？我在使用 %'s，现在我正在尝试使用填充，但它仍然无法正常工作
如果您使用 VS Code，例如，您可以使用 Live Sass Compiler，它将获取您的 CSS 并使其对最流行的浏览器“正确”，例如添加“-webkit-property” MOZ

标签： html css ios responsive-design

【解决方案1】：

Chrome 模拟器使用与 iOS Safari 不同的渲染和 JavaScript 引擎，因此它在显示您的网站在实际设备上的样子时并不完全可靠。

为了能够在真正的 iPhone 上检查您的代码，您有多种选择。

如果您有 Mac，请从应用商店下载 Xcode。从 Xcode 菜单栏中，选择 Xcode > Open developer tool > Simulator。一旦您进入模拟器，您就可以在一系列不同的 iPhone 上查看您的网站。要检查您的代码，请打开 Safari。在“首选项 > 高级”中，确保勾选“在菜单栏中显示开发菜单”。单击“开发”菜单，您将在列表中看到您的模拟设备。选择它，网络检查器将弹出。您现在可以像使用 Chrome 开发工具一样检查所有元素。
如果您没有 Mac，Browserstack 可以帮助您。

【讨论】：