Css 什么'；让HTML5背景视频填充视网膜显示高度的诀窍是什么？

我使用背景视频构建了一个新的客户端启动页面，除了对iPhone进行响应性调整和在iOS上删除背景视频之外，我没有想到要在视网膜上进行测试

今天，当我在MBP视网膜上观看时，看起来视频覆盖了高度上的“正确像素数”，但不确定如何强制视频覆盖“2x”

你听说过这个规格吗

对于视网膜，是否可以像将视频背景的最小高度/最小宽度设置为“200%”那样简单

使用的标记 截图和链接

---

视网膜可以使用的一个技巧是在JavaScript中实例化元素，将其宽度和高度设置为“常规”身体大小的两倍

您可以像下面这样实例化宽度和高度变量：

var videoWidth = (body.innerWidth() * 2);
var videoHeight = (body.innerHeight() * 2);

videoBackground.setAttribute('width', videoWidth / 2);
videoBackground.setAttribute('height', videoHeight/ 2);

然后，在JavaScript文件中创建视频背景对象时，将宽度和高度参数设置为videoWidth和videoHeight的一半。它可能看起来像这样：

var videoWidth = (body.innerWidth() * 2);
var videoHeight = (body.innerHeight() * 2);

videoBackground.setAttribute('width', videoWidth / 2);
videoBackground.setAttribute('height', videoHeight/ 2);

上面的代码将在桌面和非视网膜设备上正常显示视频背景。最后，当检测到视网膜设备时，您可以使用以下代码将其放大：

if(window.devicePixelRatio == 2) {
    videoBackground.setAttribute('width', videoWidth);
    videoBackground.setAttribute('height', videoHeight);
}

---

这种方法的优点是，它为非视网膜显示提供了一个后备方案。此解决方案的重要方面是在JavaScript中实例化视频对象，而不是在HTML中。

谢谢。这听起来像是可行的，但我必须想办法实现它。（设计师对开发人员说）您必须在JavaScript中创建元素，并将其绑定到您在HTML中声明的div。将所有这些实例化放在JS文件中名为“prepareVideo（）”的函数中。在HTML中调用函数：

此处的代码

FYI:“为视网膜将视频背景的最小高度/最小宽度设置为200%”不起作用。它基本上只是对视频内容进行了“200%缩放”-脚本似乎是答案。