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

【问题标题】：HTML/CSS responsiveness issues on iOS devicesiOS 设备上的 HTML/CSS 响应问题
【发布时间】：2021-06-27 03:24:25
【问题描述】：

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

源代码在这里：

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

我再说一遍，问题只出在 iOS 设备上。截图如下：

如果有人可以帮助我解决此问题，我将不胜感激。请不要关注我将很快解决的其他响应问题。

先谢谢你！

【问题讨论】：

您可以链接用于该特定视图的 css 文件吗？
github.com/00009115/WebTech.CW2.00009115/blob/master/public/… 从第 443 行开始，卡片的类别是 .blog-card
请在实际问题中添加足够的代码，以便我们自己看到问题 - 请参阅 [link]stackoverflow.com/help/minimal-reproducible-example 了解如何执行此操作的信息。我们中的一些人热衷于提供帮助，但不必在外部站点上浏览数百行代码。谢谢。
哦，对不起。这是我的第一个问题。下次我会考虑这个

【解决方案1】：

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

更多详情请参考： CSS media queries

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

【讨论】：

【解决方案2】：

-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

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

学习愉快！

【讨论】：

实际上，我正在使用 flex-box 和第三方软件编译我的 CSS 以使其更加跨浏览器。我可以通过为卡片高度提供 fit-content 来解决这个问题。无论如何感谢您的帮助

【解决方案3】：

我通过为卡片的高度赋予更具响应性的值解决了这个问题。即：

height: fit-content;

【讨论】：