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 中工作。 謝謝本·蘇切特的建議！