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">

我在640px时需要更改的每个css条目中包含!important标记，如下所示：

@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 5上呈现的确切像素数量。

我已指定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 清除了缓存，并尝试使用隐身模式。

UPDATE：如果我在图像之前指定颜色（为了测试），我将能够在Safari中看到指定的颜色，但没有图像：

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

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

Answer 1

在等待帮助的同时，我找到了一个针对我的案例的解决方法。感谢@ daemeron＆＃39; answer。

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

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

这适用于iPhone和Windows 10手机。正是我在寻找的东西。

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

1 个答案: