是否可以在 html/css 中定位手持移动设备？

Question

我的 html 中有一个视频，我只想在桌面浏览器上显示，因为我认为从桌面到移动设备的带宽差异会在一定程度上削弱移动浏览器。 html 或 css 中是否有任何逻辑可用于定位移动设备？

这是我当前的 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;
}

是否有任何媒体查询或任何逻辑我可以实现以使该视频仅在桌面浏览器中显示？

Answer 1

您可以使用以下媒体查询在移动设备中不显示 second_section div。

除此之外，您还可以在同一媒体查询中显示另一个针对移动设备优化的视频剪辑

@media (min-width:767px) {
    .second-section {
        display:block !important;
    }
    .second-section-mobile {
        display:none !important;
    }
}

@media (max-width: 766px) {
    .second-section {
        display:none !important;
    }
    .second-section-mobile {
        display:block !important;
    }
}

可选 - 您可以使用以下几行来创建更多断点

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
}