Safari auf iOS funktioniert nicht mit Medienabfragen

Question

Mein Problem ist, dass ich keine Medienabfrage auf iPhone 5s iOS 9.3.2 Safari arbeiten kann. Ich habe ein Vollbildvideo auf meiner Seite, das ich gerne in ein Bild auf dem Handy umwandeln würde. Ich habe this tutorial verfolgt, um es zu ermöglichen.

Ich habe angegeben die viewport wie folgt aus:

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

I !important Tag in jedem CSS-Eintrag enthalten sind, ich muss geändert werden, wenn 640px sein, wie folgt aus:

@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*/ 
} 
} 

ich beschlossen, Verwenden Sie 640px, da es die genaue Anzahl der Pixel ist, die auf dem iPhone 5s nach this source gerendert wird.

Ich habe angegeben, dass die backgroundtransparent sein sollte, da es die einzige Option zu sein scheint, um den Standardvorlagenstil zu umgehen. Wenn der Hintergrund transparent wird, wird das Hintergrundbild angezeigt.

Ich habe this und this gelesen. Ich habe die vorgeschlagenen Lösungen für mein Problem angewendet, aber keiner von ihnen hat funktioniert.

HINWEIS: Ich habe keine Mac-Maschine, um dieses Problem über den Webinspektor des iPhone zu testen. Das Erstellen einer VM unter Windows scheint kein einstündiger Job zu sein.

Ich habe meinen Code in Chrome 50.0.2661.102 m (64-bit), Mozilla 46.0.1 und Edge on Windows Phone getestet alles funktioniert gut.

Ich habe versucht, mit Safari 5.1.7 (die letzte für Windows freigegebene Version) zu arbeiten, aber es scheint sehr veraltet zu sein (wie erwartet).

Ich habe gelöscht auch den Cache mit Ctrl +Umschalt +R und versuchte, den Inkognito-Modus zu verwenden.

UPDATE: wenn ich die Farbe angeben (zum Zweck der Prüfung) vor dem Bild, das ich dann in der Lage sein werde, die angegebene Farbe in Safari zu sehen, aber kein Bild:

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

Jede Idee, wie um das zu lösen?

Answer 1

Während ich auf Hilfe wartete, habe ich einen Workaround nur für meinen Fall gefunden. Danke an @ daemerons answer.

Anstatt also die Umsetzung separate styleheets für verschiedene Geräte es nur möglich ist, die lästige Play Taste auf dem Hintergrund von zu verbergen:

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

Dies funktioniert gut auf dem iPhone und Windows 10 mobil. Genau das, was ich gesucht habe.