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

Question

我的问题是我无法使媒体查询在iPhone 5s iOS 9.3.2 Safari 。 我的页面上有一个全屏视频，我想将其更改为手机图像。 我已按照本教程进行操作。

我已经指定了这样的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因为根据此消息来源 ， 这是在iPhone 5s上渲染的确切像素数量。

我指定background应该是transparent因为它似乎是解决默认模板样式的唯一选择。 意思是当背景变为透明时，背景图像就会出现。

我已经读过这个和这个 。 我已将建议的解决方案应用于我的问题，但没有一个起作用。

注意：我没有Mac机通过iPhone的Web检查器测试此问题。 在Windows上制作VM似乎不是一个小时的工作。

我已经Edge on Windows Phone Chrome 50.0.2661.102 m (64-bit) ， Mozilla 46.0.1和Edge on Windows Phone测试了我的代码，一切正常。

我曾尝试使用Safari 5.1.7 （Windows的最新版本），但它似乎已经过时了（与预期的一样）。

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

更新：如果我在图像之前指定了颜色（出于测试目的），那么我将能够在Safari中看到指定的颜色，但是没有图像：

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

任何想法如何解决这个问题？

Answer 1

在等待帮助的过程中，我发现了一种针对我的情况的解决方法。 感谢@daemeron的回答 。

因此，除了为不同的设备实现单独的样式表外，还可以通过以下方法在后台隐藏讨厌的“ Play按钮：

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

这在iPhone和Windows 10移动版上效果很好。 正是我想要的。