plyr.io 控件无法在移动设备 (CSS) 上正确显示

Question

我为 Hugo SSG 维护一个主题，该主题基于 HTML5 UP 的Alpha 主题。

在主题中，我使用 plyr.io 在帖子中嵌入音频。但是，在移动设备上，播放器控件无法正确显示（有关详细信息，请参阅this github issue）。

问题在 iOS Safari 和将 Firefox 窗口调整为移动比例时很明显。

我认为这是因为网站的 CSS 冲突/接管了 plyr.io CSS——但我不知道从这里去哪里。

我试过使用一些

:not(.plyr)

从 CSS 中排除 plyr.io 类，但它没有按预期布置。

Answer 1

你可以尝试写一些媒体查询。这将允许根据设备比例更改您的样式。为此，您可以将最大宽度设置为 480px 以针对大多数移动设备，可以看到一些可能对您有所帮助的示例here.