ios - iOS 上的 Safari 不适用于媒体查询

Question

我的问题是我无法让媒体查询在 iPhone 5s iOS 9.3.2 Safari 上运行。我的页面上有一个全屏视频，我想将其更改为移动设备上的图像。我关注了this tutorial让它发生。

我已经像这样指定了viewport:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

我在每个 CSS 条目中包含了 !important 标签，当我是 640px 时需要更改，如下所示:

@media only screen and (max-device-width: 640px) {

 html {
  background: url('image.jpg') no-repeat center center fixed !important;
  background-color: rgba(0, 0, 0, 0) !important;
 }
 #video {
  display: none !important; 
 }
 body{
  background: rgba(0, 0, 0, 0) !important; 
  /*also tried with background:transparent !important*/
 }
}

我决定使用 640px，因为它是根据 this source 在 iPhone 5s 上呈现的确切像素数量.

我已经指定 background 应该是 transparent 因为它似乎是解决默认模板样式的唯一选项。这意味着当背景变得透明时，背景图像就会显示出来。

我已阅读 this和 this .我已将建议的解决方案应用到我的问题中，但没有一个有效。

注意:我没有 Mac 机器来通过 iPhone 的网络检查器测试这个问题。在 Windows 上制作虚拟机似乎不是一小时的工作。

我已经在 Chrome 50.0.2661.102 m(64 位)、Mozilla 46.0.1 和 Windows Phone 上的 Edge 中测试了我的代码一切正常。

我曾尝试使用 Safari 5.1.7(为 Windows 发布的最后一个版本)，但它似乎非常过时(正如预期的那样)。

我还使用 Ctrl+Shift+R 清除了缓存并尝试使用隐身模式。

更新:如果我在图像之前指定颜色(为了测试)，我将能够在 Safari 中看到指定的颜色，但看不到图像:

background: green url('image.jpg') no-repeat center center fixed !important;

知道如何解决这个问题吗？

Answer 1

在等待帮助的过程中，我找到了适合我的情况的解决方法。感谢@daemeron 的 answer .

因此，与其为不同的设备实现单独的样式表，还不如隐藏恼人的 Play。背景上的按钮:

*::-webkit-media-controls-start-playback-button {
 display: none!important;
 -webkit-appearance: none
}

这在 iPhone 和 Windows 10 移动设备上运行良好。正是我要找的。