html - CSS iPhone 不能正确渲染

Question

我知道这可能是一个常见的话题，但我真的需要你的帮助。我创建了一个网站，您可以在http://safeway-itnovation.com/找到该网站，但它无法在 iPhone 设备的横向模式下正确呈现。

这是一段视频，展示了它在 iPhone 设备上的外观（纵向和横向）： https ://vimeo.com/580283262

这是一段视频，展示了它在我的 iPhone 7 Plus（横向）上的实际外观：https ://vimeo.com/580284241

如您所见，第二部分（白色背景）完全关闭。这里是所有想要查看完整代码的人的 GitHub 存储库：https ://github.com/MarcVana/SafeWay-website 。

但是，让我简要说明一下。我的查询看起来像这样： 查询，它们针对 VS Code 上使用 Autoprefixer 的各种网站进行了优化（针对最近 10 个版本的浏览器）。

我已经把<meta name="viewport" content="width=device-width, initial-scale=1" />我的 HTML 文件放在了开头。

白色部分的 4 个盒子有position: absolute.

视频中还有另一个问题，即使我将它们调整为 1080p 的大小并使用 Photoshop 将它们导出到网站，我的图片也无法正确渲染，它们都不大于 1MB。但这是另一个问题，不应该在这里回答。

如果您需要更多信息，请随时问我任何问题：D。任何帮助将不胜感激！

标签： htmlcssiosiphonemedia-queries