Mobile Pixel / CSS Pixel Ratio to Device.

[DamianToczek]

Hallo,
es gibt eine "Device Pixel to CSS Ratio".
Also wenn man eine normale Website erstellt, sind 1080 Pixel auch 1080 Pixel. In einer Mobilen Webseite sind die 1334 Pixel nur 667pixel in CSS (bei Iphone7 ist es so also ein 2x Ratio.)
Die Frage ist, wie kann ich es so machen dass 10 Pixel auf meinem Handy auch die 10 Pixel sind oder halt wie man diese "Ratio to CSS" außer Kraft setzten kann?

mydevice.io know your mobile device (pixel-ratio, CSS width, features)

 

[DamianToczek]

Ich bin zufällig auf "mydevice.io" gegangen weil ich sehen wollte wie breit mein Display ist in CSS Pixel (oben auf mydevice.io ist so ein Messstab.).
Weiter runter gescrollt hab ich dass gesehen:

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

Falls jemand dass suchen sollte, naja hat's jetzt gefunden

 

[-sori-]

Ansonsten versuch es mal mit rem und em statt px und %.

 

[DamianToczek]

Ansonsten versuch es mal mit rem und em statt px und %.

Es macht kein Unterschied ob es Pixel, % oder "em" sind. Es geht um das Skalieren. Da helfen keine % da es eh nichts mit Skalierung zu tun hat. Aber danke für die Mühen. Antwort steht schon bei #2.

 

[fotoman]

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

Dahit hast Du aber keine 1:1 Skalierung auf einem HighDPI Display. Das sorgt dafür, dass eine "Darstellungseinheit" korrekt skaliert ist. Dass also ein Element, das bei 96 DPI 2cm groß ist, auf der HighDPI Anzeige auch 2 cm groß ist.

Voraus gesetzt, der Anwender zoomt die Anzeige nicht oder hat den Browser auf einen Standardzoom != 100% gestellt.

Das ist aber natürlich auf den Handy weit davon entfernt, dass 10 Pixel auch 10 Displaypixel sind (falls man kein uralt Handy mit 96 PPI Display mehr hat).

U.U. ist der Link für Dich auch noch interessant
Device and Viewport Size In JavaScript
Damit kannst Du für den aktuellen Browser alle relevanten Breiten-/Höhenabfragen sehen

 

[DamianToczek]

Hab kurz ne andere Frage.
Ich möchte dass alle <p> in dem "container" <div> einen margin von 5pixel haben.
Ich hab es so geschrieben aber funktioniert nicht :/

.container p {
margin:5px;
}

 

[fotoman]

Vermutlich hat das <div> Elemnt dann selber noch ein Padding (innenabstand)
Siehe
CSS/Eigenschaften/Abstand/margin – SELFHTML-Wiki
was es da alles an (jdenfalls für mich) unerwarteter Platzverschwendung gibt, die man überall abschalten muss, wenn man sie nicht will.