基于屏幕大小渲染html div内容

Question

我有一个有视频背景的网站。但是，它不会在ios设备上显示。(也不确定它是否会在Android上显示。(现在我想改变加载方法，如下所示：

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

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

以下是的视频示例

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

Answer 1

大家好，参考本文https://www.w3schools.com/howto/howto_js_media_queries.asp#:~：text=使用%20Media%20Queries%20With%20JavaScript，平板电脑%2C%20手机%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