如何在html＆amp;中复制这个@media屏幕效果CSS？

Question

我的html中有一个视频，我理想情况下不想在平板电脑和平板电脑上播放移动设备浏览器，只是桌面。我发现这个网站“ https://www.myprovence.fr”完全反映了这一点。

正如你在登陆页面上看到的那样，他们在标题中有一个视频，当缩小到特定的断点时，显示一个图像（我猜的是背景图像），这不是一个很大的壮举。但是，我在Xcode的iPad Pro模拟器中将此站点加载到移动Safari中，＆amp;它也不是显示实际视频而是图像：

众所周知，iPad Pro屏幕尺寸远远超过2000px，所以我怀疑使用了@media屏幕方法。那么他们是如何在视频仅在桌面浏览器上播放时创建此效果的？

这是我的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浏览器上播放，但仍可在桌面浏览器上播放。说实话，我不能完全围绕专业人士和使用这种方法的方式，所以如果有人可以提供输入，那么不仅仅是欢迎：）