Css Media Query funktioniert nicht mit Samsung S5 auf Chrome

Question

Ich entwickle eine responsive Website, die ein Video nur anzeigt, wenn Sie die Website mit einem PC besuchen, aber es versteckt, wenn Sie ein Mobiltelefon verwenden. Ich habe bereits eine Abfrage eingerichtet, die für die meisten mobilen Geräte funktioniert (wir können sagen, dass sie für jedes mobile Gerät funktioniert). Ich habe es mit einem iPhone 5s/6s, einem Samsung S4 mini überprüft und es funktioniert perfekt (mit Safari/Internet/Chrome). Als ich mit einem Samsung S5 versuchte, funktionierte es nicht in Chrome. Das Problem ist also: Warum funktioniert die Abfrage nicht in Chrome? Vielleicht ist es die Größe des Samsung S5 Bildschirm? Wenn Sie die Seite ist http://objectfilms.altervista.org/

Der Code für mobile Geräte mit kleinerem Bildschirm überprüfen mögen, ist dies:

/* video background nascosto su Mobile phone */ 
@media only screen and (min-device-width : 200px) and (max-device-width : 720px) { 
    .video-div { 
     visibility: hide; 
     display: none; 
    } 
} 

Der Code, der für das Samsung S5 arbeiten, ist die folgende sollte:

/* video background nascosto su Samsung S5 */ 
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { 
    .video-div { 
     visibility: hide; 
     display: none; 
    } 
} 

Was kann ich tun?

Answer 1

Der S5 verfügt über eine Auflösung von 1080 x 1920, und das sind die Gerätepixel, so dass ich glaube, Sie würden die Werte von denen abfragen müssen, wie

@media screen and (device-width: 1080px) and (device-height: 1920px) and (-webkit-device-pixel-ratio: 3) { ... 

... oder die regelmäßige Anwendung Pixelwerte, aber nicht als Gerätepixel:

@media screen and (width: 360px) and (height: 640px) and (-webkit-device-pixel-ratio: 3) { ...