Question

做研究。我想在我的网站桌面版本上使用HTML 5音频标签，是否可以使用@media将其删除。

Answer 1

一种解决方案可能是简单地不使用CSS 媒体查询显示audio元素。除媒体查询外，您还必须在meta元素中设置视口。

但是在某些情况下要小心，即使audio元素没有显示，某些浏览器也会加载音频文件。

在这里，您有audio元素的W3C参考，请阅读preload属性：http://www.w3.org/TR/html-markup/audio.html#audio

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>audio test</title>

  <style>
    @media (max-width: 799px) {
      audio {
        display: none;
      }
    }
  </style>

</head>
<body>

<audio src="some/audio/file.mp3" preload="none" controls>
  Your browser does not support the <code>video</code> element.
</audio>


</body>
</html>

仅在我的网站桌面版本上使用HTML5 <audio>标记</audio>

1 个答案: