CSS Verständnisfrage zu Media Queries und min-width

[Snooty]

Hio,

wieso kann ich eigentlich folgenden Code verwenden, um .button nur am PC angezeigt zu bekommen und auf dem Handy nicht?

.button { display: none }

@media only screen and (min-width: 1024px) {
  /* For desktop: */
  .button { display: inline-block }
}

Moderne Handys haben doch auch höhere Auflösungen als 1024 Pixel in der Breite, trotzdem wird mir bspw. der .button nur am Desktop angezeigt.

 

[Arzaiel]

Je nach Pixeldichte haben die meisten Smartphone-Browser einen gewissen Skalierungsfaktor, sodass die Elemente auf der Seite so angezeigt werden als hätte das Smartphone eine geringere Auflösung. Oder würdest du wollen, dass auf einem 5 Zoll Smartphone mit Full-HD Auflösung die Textzeilen genau so viele Zeichen fassen wie auf einem 24 Zoll Full-HD Monitor?

Ist der Skalierungsfaktor z.B. bei 2 wird auf einem Full-HD Smartphone die Webseiten so groß angezeigt als hätte das Display eine Auflösung von 960x540. Das heißt in diesem Fall würde in deinem Beispiel-CSS der Button nicht angezeigt werden, weil Media Queries die „umgerechnete“ Auflösung nach Anwendung des Skalierungsfaktors benutzen.

Über

window.devicePixelRatio

lässt sich über JavaScript der jeweilige Skalierungsfaktor des Gerätes herausfinden. Dies ist z.B. dann interessant, wenn man die Canvas API auf mobilen Geräten benutzt.

 

[Snooty]

Alles klar, danke.