CSS 网格在实际移动设备上无法正常工作时出现问题。在 Chrome/Firefox 开发工具中测试时，代码完美运行

Question

我最近创建了一个使用 CSS Grid 的图片库，当我在 Firefox 上和 Chrome 中使用开发工具时，它工作得非常好。只有当我在实际 phone (iPhone) 上测试网站时，图库似乎崩溃了。在桌面上运行良好。

Here's what it looks like on actual mobile

Here's what it's supposed to look like and how it looks when viewed through chrome/firefox dev tools

我的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 张图片加载到网格上。这解释了为什么有 card-hidden/card-fade-in class）：

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

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

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

Answer 1

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

我想通了。正如评论所建议的那样，我尝试使用 Safari 进行调试，但我没有这样做，我发现无论出于何种原因，在我的实时代码中我的 .gallery-grid class in CSS 有一个“高度: 100%”，无论出于何种原因，这都是在扔掉东西。所以我删除了它并将我的.card更改为具有自动高度而不是离开“最大高度：100％”。这似乎工作得很好，现在可以在 Safari iOS、Chrome 和 Firefox 中工作。谢谢 Ben Souchet 的建议！

CSS 网格在实际移动设备上无法正常工作时出现问题。在 Chrome/Firefox 开发工具中测试时，代码完美运行

Having an issue with CSS Grid not working properly on actual mobile device. The code works perfectly when testing within Chrome/Firefox dev tools

html

css

mobile

flexbox

css-grid