时间戳

首页 > 解决方案 > iPhone 不支持 CSS 网格行

css - iPhone 不支持 CSS 网格行

问题描述

.remote-local-video {
  display: grid;
  grid-gap: 0.25rem;
  grid-template-columns: 50% 50%;
  grid-template-rows: 80vh;
  grid-template-areas: "remoteVideo localVideo";

  .ch-video {
    object-fit: contain;
  }

  @media (max-width: 769px) {
    grid-template-columns: 100%;
    grid-template-rows: 40vh 40vh;
    grid-template-areas: "remoteVideo" "localVideo";
  }
}

我们有这个 CSS。它似乎在 Macbook Pro 中的 Android Chrome、Chrome/Firefox 开发工具中运行良好。在 iPhone 12 Max Pro、iPhone 11 Pro 和 iPhone XR 中 - 显示 remoteVideo 或 localVideo。两者不一起显示。我在 Chrome 和 Safari 浏览器中都试过这个。

标签： cssiphonecss-grid

解决方案

.remote-local-video {
  display: grid;
  grid-gap: 0.25rem;
  grid-template-columns: 50% 50%;
  grid-template-rows: calc(100vh - 80px);
  grid-template-areas: "remoteVideo localVideo";

  .ch-video {
    object-fit: contain;
  }

  @media only screen and (max-width: 950px) and  (orientation: portrait) {
    div#meetingLocalVideo {
      height: calc(50vh - 40px);
    }

    div#meetingRemoteVideos {
      height: calc(50vh - 40px);
    }

    grid-template-columns: 100%;
    grid-template-rows: calc(50vh - 40px) calc(50vh - 40px);
    grid-template-areas: "remoteVideo" "localVideo";
  }

  @media only screen and (max-width: 950px) and  (orientation: landscape) {

    div#meetingLocalVideo {
      height: calc(100vh - 80px);
    }

    div#meetingRemoteVideos {
      height: calc(100vh - 80px);
    }
    grid-template-rows: calc(100vh - 80px);
  }
}

IOS 期望我们设置明确的 div 高度。上面的 CSS 工作正常。

推荐阅读