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

Question

问题可以在这里模拟： 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 查询，都会应用样式。所以它应该对此没有影响，但确实如此。

Safari 中的任何 iPhone、iPad 或 Chrome。

感谢您的回答。

Answer 1

无法在 chrome 中重新创建 'toggle device' 似乎怀疑重新加载可以解决问题，也许它与 CSS 无关，而是与 JS 相关。无论如何，我建议将 float 更改为 flex 或 grid。

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

Invisible layout on iPhone and iPad when CSS @media is applied

html

css

iphone

ios

media-queries