iOS 设备上的 HTML/CSS 响应问题

我遇到了 HTML/CSS 网页样式的问题。也就是说，响应性调整在专门的 iOS 设备上无法正常工作。准确地说，您可以在下面的链接中看到所谓的“博客卡片”没有正确显示：

CSS 可能看起来不干净，因为我正在将我的旧项目调整为新的 Node.js 项目。但是，我也遇到了与旧版相同的问题。

我再说一遍，问题仅在于 iOS 设备。截图附在下面：

如果有人能帮我解决这个问题，我将不胜感激。并且请不要关注我将很快解决的其他响应问题。

先谢谢你！

您可以为 iPhone 设备编写单独的媒体查询，问题是 iPhone 移动分辨率与 Android 和标准设备略有不同。例如：iPhone 5 和 se 纵横比。

有关更多详细信息，请参阅： CSS media queries

或使用 Bootstrap CSS 框架，希望这对您的问题有所帮助。

-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: justify;
-webkit-box-align: center;

这被称为 box-flex 并且它们的跨浏览器兼容性非常差，所以你不应该使用它。尝试使用弹性框或网格。要阅读有关此特定属性的此问题和浏览器兼容性的更多信息，您可以参考 https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex

事实上，你至少不应该在生产中使用这样的东西。我希望这能解决您的问题。

快乐学习！

我通过为卡片的高度提供更多响应值解决了这个问题。即：

height: fit-content;