Mobile Geräte arbeiten mit unterschiedlichen Bilschirmauflösungen, damit aber Anwendungen und auch Webseiten auf allen Geräten unabhängig davon dargestellt werden, arbeitet zB der Browser nicht direkt mit diesen Auflösungen.

Als Beispiel zur Verdeutlichung nutzen ich ein
Samsung Galaxy S6 5,1 Zoll mit einer Auflösung von 1440px * 2560px, und ein
Samsung Galaxy Note 4 5,7 Zoll mit einer Auflösung von 1440px * 2560px, und einen
FullHD Monitor 21 Zoll mit einer Auflösung von 1980px * 1080px.

In unserer Webanwendung nutzen wir folgendes css mit zwei MediaQueries.

body {
            width: 100%;
            height: 100%;
            background-color: gray;
        }

        @media screen and (max-width: 1200px) {
            body {
                background-color: red;
            }
        }

        @media screen and (max-width: 450px) {
            body {
                background-color: yellow;
            }
        }

        @media screen and (max-width: 350px) {
            body {
                background-color: green;
            }
        }

Der Hintergrund wird auf grau gesetzt, wenn der Bildschirm kleiner wird, wird der Hintergrund bei <= 1200px rot und bei <= 450px gelb und bei <= 350px grün eingefärbt. Wie sieht nun die Darstellung auf den verschiedenen Geräten aus?
Die Smartphones halten wir dabei im Querformat.

Das Verhalten des Monitors:
Bei der Darstellung dieses Codes im Browser wird das Browserfenster in meinen Monitor grau sein, verkleinere ich es wird es erst einmal rot und bei weiterer Verkleinerung grün.

Das Verhalten der Smartphones, Querformat:
Obwohl wir bei den Smartphones die selbe Displayauflösung haben, erhalten diese sich dennoch anders:
Galaxy S6 – der Browser zeigt ein grünes Bild
Galaxy Note 4 – der Browser zeigt ein gelbes Bild

Warum ist das so?
Hier kommt die Pixeldichte ins Spiel

ldpi (120dpi) = Faktor 0.75
mdpi (160dpi) = Faktor 1.0
HDpi (240dpi) = Faktor 1.5
xhdpi (320dpi) = Faktor 2.0
xxhdpi (480dpi) = Faktor 3.0
xxxhdpi (640dpi) = Faktor 4.0

Das Galaxy S6 hat eine Pixeldichte vom Faktor 4.0 das ergibt einen Bildschirmbreite im Querformat mit der der Browser arbeitet von 640dp = 2560px/4.
Beim Galaxy Note 4 ist die Pixeldichte etwas kleiner, nämlich 3.0, das ergibt dann
480dp = 2560px/4.
Der Browser interpretiert ein dp als ein px.

dp ist eine abstrakte Einheit, sie varieiert nach der Pixeldichte.
Eine Linie mit einer Höhe von einen Pixel, wird auf einen Display mit 160dpi tatsächlich 1 Pixel hoch sein, auf einen Display mit 320dpi wird diese tatsächlich 2 Pixel hoch sein.
Der Browser jedoch hat nur die Anweisung eine Linie von 1 Pixel zu zeichen.