CSS Grid 在实际移动设备上无法正常工作的问题。 在 Chrome/Firefox 开发工具中进行测试时，代码运行良好

Question

编辑：伙计们，我想通了。 由于评论建议我尝试使用 Safari 进行调试，但我没有这样做，我发现无论出于何种原因，在我的实时代码中我的实时代码 my.gallery-grid class 中的 Z2C56C360580420D293172F42D850DFB61DZ 都让事情大吃一惊：“呵呵”无论出于何种原因。 所以我删除了它并将 my.card 更改为 auto 的高度，而不是离开“max-height: 100%”。 这似乎工作得很好，现在正在 Safari iOS、Chrome 和 Firefox 中工作。 谢谢本·苏切特的建议！

我最近完成了创建一个使用 CSS 网格的图像库，并且当我在 Firefox 和 Chrome 中使用开发工具时工作得非常好。 只有当我在我的实际手机（iPhone）上测试网站时，画廊似乎崩溃了。 在桌面上工作得很好。

这是它在实际手机上的样子

这是它的外观以及通过 chrome/firefox 开发工具查看时的外观

我的 HTML 代码：

            <div id="trigger-view-button" class="gallery-grid">
                <div class="card">
                    <img src="css/images/gallery/gallery-img1.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img2.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img3.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img4.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img5.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img6.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img7.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img8.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img9.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img10.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img11.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img12.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img13.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img14.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img15.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img16.jpg" alt="">
                </div>
            </div>

我的 CSS 代码：

/*------- Gallery Photos -------*/

.gallery-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: auto;
    padding: 0 1.5em;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #353535;
    font-size: 3rem;
    color: #fff;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    max-height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 500ms, opacity 1200ms;
    overflow: hidden;

    object-fit: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card:hover {
    box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
    transform: translateY(-3px) scale(1.1);
}

.card-hidden {
    height: 0;
    visibility: hidden;
    opacity: 0;
}

.card-fade-in {
    height: auto;
    visibility: visible;
    opacity: 1;
}

我的 JS 代码（这允许用户在单击加载更多按钮后将大约 8 张图片加载到网格上。这解释了为什么有一个卡片隐藏/卡片淡入类）：

$("#loadMore").click(function () {
    $(".card-hidden").toggleClass("card-hidden card card-fade-in");
    $("#loadMore").fadeOut("slow");
});

我一直在寻找解决方案，但是当开发工具显示网格运行良好而实际移动设备却没有时，似乎很难找到一些东西。 我还检查了兼容性，safari 似乎与我正在使用的网格设置兼容。

任何建议都会很棒。 提前致谢。

Answer 1

我对问题进行了编辑，但我也会将答案放在这里以“解决”问题。

我弄清楚了这个问题。 正如评论所建议的那样，我尝试使用 Safari 进行调试，但我没有这样做，我发现无论出于何种原因，在我的实时代码 my.gallery-grid class 中的 Z2C56C360580420D293172F42D100D293172F42D1000DFB 中都出现了“扔东西”出于任何原因关闭。 所以我删除了它并将 my.card 更改为 auto 的高度，而不是离开“max-height: 100%”。 这似乎工作得很好，现在正在 Safari iOS、Chrome 和 Firefox 中工作。 谢谢本·苏切特的建议！