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

【问题标题】：Safari on iOS doesn't work with media queriesiOS 上的 Safari 不适用于媒体查询
【发布时间】：2016-10-06 00:30:48
【问题描述】：

我的问题是我无法让媒体查询在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-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;

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

【问题讨论】：

我想你忘了右括号 }
@JentiDabhi 解决了这个问题。但这不是当前配置的问题。

标签： ios css html safari windows-10

【解决方案1】：

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

因此，不必为不同的设备实现单独的样式表，而是可以通过以下方式在背景上隐藏烦人的 Play 按钮：

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

这在 iPhone 和 Windows 10 移动版上运行良好。正是我想要的。

【讨论】：