javascript - 是否可以在 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) {
}