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