html - 在移动设备中隐藏视频 div

Question

我有一个 html 页面，在 div 中有一个视频:

HTML

<div class="news">
    <h3 class="highlight">Kate's 1 Month Transformation</h3>
    <div class="clr"></div>
    <center>
        <video controls="" autoplay="" poster="assets/4/vid.png.html">
            <source src="https://globalskincr.files.wordpress.com/2015/05/wrinkle_vid.mp4" type="video/mp4">
        </video>
    </center>
</div>

我无法在移动设备中禁用视频和隐藏 div，

CSS

 .news {
     display:none;
 }

此代码隐藏视频但声音继续。

Answer 1

没有适用于所有设备的 native 100% 工作解决方案。这可以用作 CSS

@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

但是......今天的移动显示器分辨率要高得多，有时在横向模式下可能与一些较小的笔记本电脑相同。此外，此方法需要设置纵向或横向。

也许你可以在这里找到更好的解决方案 What is the best way to detect a mobile device in jQuery?

应用主题接受回复中建议的 IF，如果为真(它是移动设备，只需添加 $(".news").css("display","none");