Safari on iOS не работает со средствами массовой информации

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

Я включил !important тег в каждой записи CSS мне нужно изменить, когда будучи 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 в соответствии с this source.

Я указал, что 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 + Сдвиг + R и пытался использовать режим инкогнито.

UPDATE: если указать цвет (ради тестирования) перед изображением я буду тогда в состоянии увидеть определенный цвет в Safari, но нет изображения:

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

Любая идея, как решить это?

Answer 1

В ожидании помощи Я нашел обходное решение только для моего дела. Благодаря @ daemeron's answer.

Таким образом, вместо реализации отдельных styleheets для различных устройств это просто можно скрыть раздражающие Play кнопку на заднем плане:

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

Это прекрасно работает на iPhone и Windows, 10 мобильных. Именно то, что я искал.