Wie funktionieren Breakpoints auf modernen hochauflösenden Geräten?

Question

Moderne Telefone und Tablets haben sehr hohe Auflösungen.

Mein Galaxy S7 Edge, zum Beispiel, hat eine Auflösung von 1440 x 2560 Pixel.

Gemeinsame Haltepunkte für mobile Geräte scheint um 768 Pixel, wie in bootstrap.

Beispiel von bootstrap.css:

@media (min-width: 768px) { 
    .container { 
    width: 750px; 
    } 
} 
@media (min-width: 992px) { 
    .container { 
    width: 970px; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
    width: 1170px; 
    } 
} 

Wie kommt es, dass mein Telefon zeigt die „responsive“ Version von Websites obwohl Auflösung es ist ist wohl größer als die meisten Desktop-Monitore? Aus dem Beispiel scheint es, dass mein Telefon die Seite immer im "Desktop" -Modus anzeigen würde.

Answer 1

Aus dem Artikel A pixel is not a pixel is not a pixel ...

ich weiß, was Web-Entwickler interessiert sind, jedoch. Sie benötigen CSS-Pixel. Das heißt, die "Pixel", die in CSS-Deklarationen wie width: 300px oder font-size: 14px verwendet werden. Diese Pixel haben nichts mit der tatsächlichen Pixeldichte des Geräts zu tun. Sie sind im Wesentlichen ein abstraktes Konstrukt speziell für uns Webentwickler erstellt.

Am einfachsten lässt sich das beim Zoomen erklären. Wenn der Benutzer zoomt in, ein Element mit width: 300px nimmt mehr und mehr von der Bildschirm, und wird somit breiter und breiter, wenn in Gerät (physikalische) Pixel gemessen. In CSS-Pixeln bleibt die Breite jedoch 300px, und der Zoom-Effekt wird durch das Erweitern von CSS-Pixeln erzeugt, so lange wie benötigt wird.

Siehe auch:

• A tale of two viewports — part one
• A tale of two viewports — part two