Warum stimmt eine CSS-Medienabfrage nicht mit meinem Telefon überein?

Ich habe eine Reihe von Medienabfragen, die abhängig von der Bildschirmbreite ein anderes Hintergrundbild laden. Aus irgendeinem Grund löst mein One plus 2 mit einer Bildschirmbreite von 1080 im Hochformat die Klausel (max-width: 400px) aus. Warum?Warum stimmt eine CSS-Medienabfrage nicht mit meinem Telefon überein?

Ich vermute, es ist etwas mit Pixeldichte zu tun. Wenn dies der Fall ist, gibt es eine Liste der gängigsten Bildschirmgrößen bei der Berücksichtigung der Pixeldichte?

@media screen and (max-width: 1080px) { 
    .mainImage { 
    background-image: url('shop-home-vertical-1080.jpg'); 
    } 
} 

@media screen and (max-width: 800px) { 
    .mainImage { 
    background-image: url('shop-home-vertical-800.jpg'); 
    } 
} 

@media screen and (max-width: 600px) { 
    .mainImage { 
    background-image: url('shop-home-vertical-600.jpg'); 
    } 
} 

@media screen and (max-width: 400px) { 
    .mainImage { 
    background-image: url('shop-home-vertical-400.jpg'); 
    } 
}

Edit:

Die Darstellungs ich habe, ist:

<meta name="viewport" content="width=device-width, initial-scale=1" />

devtools Mit der vollen Breite der Elemente auf dem Bildschirm zu inspizieren. Die Bildschirmbreite scheint 360px zu sein. Genau 1080/3.

Quelle

2016-06-30 SystemicPlural

Vermissen Sie den Meta-View-Tag von Ihrer Seite? https://developer.mozilla.org/de/docs/Mozilla/Mobile/Viewport_meta_tag – Esko

hast du '' in 'hinzugefügt 'Abschnitt? – moped

@moped Der Ansichtsport ist vorhanden. Siehe Bearbeiten – SystemicPlural

Dies wird durch das Pixelverhältnis des Geräts verursacht, das das tatsächliche Geräteverhältnis herunterskaliert.

Here is a list of phones und die tatsächliche Bildschirmauflösung, die von Medienabfragen verwendet wird. Es enthält nicht das Eins plus Zwei (welches ein Verhältnis von 1: 3 hat)

Das folgende erlaubt mir, das eine plus zwei genau anzusprechen.

@media screen and (max-width: 360px) and (orientation: portrait) and (min-resolution: 3dppx) { 
    .mainImage { 
    background-image: url('shop-home-vertical-1080.jpg'); 
    } 
}

Wie ich es verstehe. In den meisten Fällen sollte ich das nicht tun. Aber in diesem Fall kann ich ein Bild mit höherer Auflösung für Bildschirme herunterladen, die davon profitieren können.

Gerade entdeckt, dass dppx noch nicht gut unterstützt wird. Dies wird auf Safari nicht funktionieren.

Quelle

2016-06-30 11:50:33 SystemicPlural

Es sieht so aus, als könnte es ein Problem sein, wenn man vergisst, ein Ansichtsfenster zu setzen. Versuchen Sie, dies in Ihren Kopf zu integrieren <head> <meta name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Quelle

2016-06-30 09:44:30

Ich habe meine aktuelle Viewport zu der Frage hinzugefügt. Ich habe versucht, zu Ihrem zu wechseln, und alles was es tut, ist zu verhindern, dass der Benutzer - wie erwartet - zoomt. – SystemicPlural

Warum stimmt eine CSS-Medienabfrage nicht mit meinem Telefon überein?

Antwort

Verwandte Themen