0

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

<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 或其他东西来做吗？显示：无；或一些这样的？（我不想编写和维护第二个网站。）

谢谢你的帮助！

4

1 回答 1

0

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

于 2013-10-28T23:15:53.023 回答