应用 CSS @media 时 iPhone 和 iPad 上的不可见布局答案

【问题标题】：Invisible layout on iPhone and iPad when CSS @media is applied应用 CSS @media 时 iPhone 和 iPad 上的不可见布局
【发布时间】：2020-05-09 20:00:02
【问题描述】：

这个问题可以在这里模拟： https://demo-bi.abra.eu/app/show

应该是这样的：

但在 iPhone 或 iPad 上会有这个，但仅在首次加载时：

在第二次加载时，所有项目都正确可见，就像在第一张图片中一样。

列表中的每个项目都受此 CSS 样式影响：

@media (min-width: 26.25rem) {
.app-main-page-layout .igate-list-sorted .igate-list-pageslist-item {
    max-width: none;
    float: left;
    width: 50%;
}}

我发现，如果您删除“@media”部分，一切正常，列表中的所有项目都可见：

.app-main-page-layout .igate-list-sorted .igate-list-pageslist-item {
        max-width: none;
        float: left;
        width: 50%;
    }

有趣的是，无论是否使用@media 查询，都可以应用该样式。所以它应该对此没有影响，但确实如此。

任何 iPhone、iPad 上的 Safari 或 Chrome 都会发生这种情况。

感谢您的任何回答。

【问题讨论】：

标签： html css ios iphone media-queries

【解决方案1】：

无法在 chrome 'toggle device' 中重新创建，重新加载解决问题似乎很可疑，也许它与 CSS 无关，但与 JS 无关。我建议将float 更改为flex 或grid 反正。

【讨论】：

感谢您的回答，但 javascript 应该不是问题，因为标准 wicket html 服务器创建使用。是的，这很奇怪。你能模拟一下吗？在 iPhone 上？这不会出现在桌面或安卓上。
抱歉，我没有 iPhone。但如果 @madie 是多余的，你应该删除它。或者，当您删除 float 样式并将其更改为 flex-box 时，它会更好地工作，因为 float 非常过时，甚至可能在新版本的浏览器（例如 Safari）中存在错误。祝你好运
我用过网格。谢谢。 :)