iPhone 不遵守 CSS 网格行

Question

.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 浏览器中都试过了。

Answer 1

我发现 iPhone 上的 Safari 在拥有完美代码方面比任何其他平台都更加讲究。可能是您的 class .remote-local-video 的右括号位于此 CSS 的底部而不是 .ch-video class 上方？另外（不确定您是否只是使用与我习惯的不同的语法 - 但我通常将媒体查询分开并在其中重新声明 class 名称）。我很快就把它放到我的测试环境中，发现它在 iPhone 6:

上可以在 Safari 中运行

.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 only screen and (max-width: 769px) {
    .remote-local-video {
    grid-template-columns: 100%;
    grid-template-rows: 40vh 40vh;
    grid-template-areas: "remoteVideo" "localVideo";
    }
  }

注意：我还使用了以下 HTML（请原谅我的内联边框可见性）：

<div class="remote-local-video">
  <div style="border: 1px solid black">1</div>
  <div style="border: 1px solid black">2</div>
</div>

（我曾经在一个 JavaScript 选择器中发现一个丢失的右括号，该选择器在 Web 应用程序的其他任何地方都可以工作，但是当部门切换到使用 iPhones!)

Answer 2

.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 工作正常。

iPhone 不遵守 CSS 网格行

iPhone not honoring CSS Grid Rows

css

iphone

css-grid