如何在 html 和 css 中复制此 @media 屏幕效果？

Question

我的 html 中有一个视频，理想情况下我不想在平板电脑和移动设备浏览器上播放，而只是在台式机上播放。我遇到了这个网站“https://www.myprovence.fr”，它正好反映了这一点。

正如您在登录页面上看到的，他们在标题中有一个视频，当缩小到特定的断点时，会显示一个图像（我猜是背景图像），这并不是什么大不了的壮举。但是，我在 Xcode 的 iPad Pro 模拟器中将这个网站加载到移动 safari 上，它也没有显示实际视频，而是有图像：

我们知道，iPad Pro 的屏幕尺寸远远超过 2000 像素，所以我怀疑是否使用了@media screen 方法。那么他们是如何创建这种视频仅在桌面浏览器上播放的效果的呢？

这是我的html：

 <div class="second-section">
    <video class="rocky" autoplay="true" loop>
      <source src="rocky_2.mp4" type="video/mp4">
      <source src="rocky_2.webm" type="video/webm">
    </video>
    <div class="overlay"></div>
  </div>

还有我的 CSS：

.second-section {
  position: relative;
  height: 100vh;
  background-color: #CD9B9B;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;
  overflow: hidden;
}
.rocky {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background: transparent;
  object-fit: contain;
}

有什么解决办法吗？

Answer 1

看来我已经能够通过基于分辨率而不是屏幕大小的媒体查询来定位桌面浏览器。这是查询：

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi) {
  .rocky {
    display: none;
  }
}

通过这样做，视频不会在 iPad/iPhone 浏览器上播放，但仍然可以在桌面浏览器上播放。老实说，我无法完全理解使用这种方法的利弊，所以如果有人能提供意见，你会非常欢迎:)