根据屏幕大小呈现 html div 内容

Question

我有一个有视频背景的网站。但是，它不会在 ios 设备上显示。（不确定它是否会在 Android 上显示。）现在我想像这样更改加载方法：

如果设备不是媒体（宽度 >700），则渲染 (div part=video.html) 否则网站仅渲染 novideo.html（背景图像）。

这个 div 位于索引页面的中间部分。

这是video example

顺便说一句，这只是一个简单的网站，没有建立在任何框架之上。我也更喜欢使用 javascript 而不是 jquery。我该怎么做？谢谢！

Answer 1

您好，参考这篇文章https://www.w3schools.com/howto/howto_js_media_queries.asp#:~:text=Using%20Media%20Queries%20With%20JavaScript,tablets%2C%20phones%2C%20etc)。

HTML：您可以在包含的 div 中包含视频和图像。像这样：

<div class = "media">
    <img id = "image"/>
    <video id = "video"></video> 
</div> 

JavaScript：

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.getElementById("image").style.display = "block";
    document.getElementById("video").style.display = "none";
  } else {
    document.getElementById("video").style.display = "block";
    document.getElementById("image").style.display = "none";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes