Question

我有一个关于响应式网页设计的简单问题。基本上，我有这个代码可以在计算机上运行视频：

<object width="480" height="360">
<param name="allowScriptAccess" value="sameDomain"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="FileLocationAndName.mp4" width="560" height="469" allowscriptaccess="sameDomain"
allowfullscreen="true" type="application/x-shockwave-flash"></embed>
</object>

此代码将在iPad上运行。

<video width="480" height="360" x-webkit-airplay="allow" controls="true"
autoplay="autoplay">
<source src="FileLocationAndName.mp4/playlist.m3u8" type="video/mp4" />
</video>

代码对每个代码都正常工作（我删除了实际的文件位置，所以如果它看起来不正确，那就是原因。）我只需要在相应的机器上显示每个块并隐藏页面上的相反块。搜索“响应式网页设计”正在回归自以为是的博客，说明为什么RWD要么是革命性的，要么是完全浪费时间。

我只是需要它才能工作。我需要包括什么？我可以用CSS或其他东西吗？ display：none;还是一些这样的？（我不想写和维护第二个网站。）

感谢您的帮助！

Answer 1

是。使用媒体查询来检测浏览器的宽度。可以使用媒体查询来检测iPad（快速谷歌搜索应该向您展示如何）。然后，就像你说的那样，对要隐藏的东西使用display: none;。因此，例如，将class="desktop"添加到桌面视频，将class="ipad"添加到iPad视频。在iPad媒体查询中，您将拥有.desktop { display: none; }和.ipad { display: block; }。在媒体查询之外，您将拥有.ipad { display: none; }和.desktop { display: block; }。我希望这是有道理的。您还可以考虑使用更普遍的视频插件，例如VideoJS。

响应式网页设计 - 在iPad上显示视频

1 个答案: