防止在移动/javascript媒体上下载视频查询宽度

我有两个网站布局-一个用于手机，一个用于桌面

我使用ZURB基金会，它将桌面布局隐藏在手机上，反之亦然。

由于桌面布局包含视频，如果可能的话，我想阻止浏览器下载该部分页面

我可以这样使用JavaScript查询吗

    if (screen.width >= 600) {

<div>Video goes here</div>

    }

如果（屏幕宽度>=600）{
这里有视频
}

---

这样做？这会起作用吗？这会阻止页面的这一部分在小于600px的屏幕上下载吗？

如果您使用

预加载

属性且

无

值：

<video id="myVideo" preload="none"></video>

---

仅当屏幕

宽度

等于或高于

600px

时加载视频，如下所示：

if($(window).width() >= 600) {
    loadVid();
}

function loadVid() {
   video = '<video src="http://techslides.com/demos/sample-videos/small.mp4" controls></video>';
   $(".video").append(video);
}

if（$（窗口）.width（）>=600）{
loadVid（）；
}
函数loadVid（）{
视频=''；
$（“.video”）.append（video）；
}

---

-->使用可调整大小的FIDLE您认为一个有效的解决方案是从html中排除视频链接，而只有当屏幕宽度超过600px时才使用jQuery条件脚本插入视频路径吗？这可能是一种有效的方法，但您必须测试它，以确定是否达到了您想要的效果。为什么preload=“none”是多余的？如果屏幕小于600px，则“预加载”设置为“无”，不加载视频，但如果屏幕大于600px，则js告诉浏览器无论如何都要加载视频。正确与否？谢谢！但假设我的目标是iPhone7，并将断点设置为750px。如果用户将手机旋转到水平方向，会发生什么情况？那么就不会提供视频了吗？我想说，这取决于用户加载页面时的屏幕宽度，如果在加载站点后进行了旋转，它应该在那里。此外，在这种情况下，您可以调整jQuery中的断点值以覆盖整个环境，也可以按用户代理设置目标，但考虑到您必须包括大多数移动浏览器代理，这将更加复杂{video1='您的结束php标记上有一个空格

；？>

。在这里工作很好：仍然不工作！？我想这可能与在引号内使用引号有关，但这也不能解决问题！？

if($(window).width() >= 600) {
    loadVid();
}

function loadVid() {
   video = '<video src="http://techslides.com/demos/sample-videos/small.mp4" controls></video>';
   $(".video").append(video);
}