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