Responsive Design - Mobile Geräte mit Full HD Auflösungen und mehr

[Kiiwii83]

Hi,

ich habe eine (wahrscheinlich) blöde Frage zum Thema Responsive Design.

Seit ich mich mit Responsive Design beschäftige, stellt sich mir die Frage nach der Zukunftssicherheit dieser Technik. Es geht dabei hauptsächlich um die Frage, was man in ein paar Jahren (oder sogar Monaten) macht, wenn viele mobile Endgeräte Full HD Auflösungen haben oder sogar 4K und mehr.

Wenn man sich heute Smartphones der neusten Generation ansieht, dann kommen die meisten mit Full HD Auflösungen daher. Können solche Geräte gar keine "kleine" Ansicht mehr darstellen?

Dann habe ich jedoch in folgender Tabelle ( Auflösungen nach Geräten ) die Spalte "Device-Width" gefunden. Und die dortige Angabe unterscheidet sich von der "Width" Angabe.

Beispiel HTC One:
Width: 1024px
Device-Width: 468px

Kann mir das einer erklären? Bricht das HTC die Website nun ab 1024px um oder ab 468px?

Lieben Gruß
Kiiwii

 

[Bennyville]

Hast dich irgendwie verguckt :)

HTC One:
Width: 1080px
Device-Width: 360px

Wie in der Liste angegeben hat das HTC One eine Pixeldichte von 300%. Also:
360px * 300% = 1080px

Es bricht also egtl. erst bei 1080px um. Du kannst aber folgendes Meta-Element nutzen, damit es bei 360px umbricht:

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

width=device-width - ist selbsterklärend
initial-scale=1.0 - sorgt zusätzlich dafür das ein 100px Element auch wirklich 100px breit ist

Das gilt dann natürlich für alle Geräte.

 

[Kiiwii83]

Ich verstehe dann aber grundsätzlich nicht, was es mit der Divice-Width auf sich hat. Sorry, dass ich mich so blöd anstelle.

Wenn nun ein Display eine Divice-Width von 320 Pixeln hat und eine Auflösung von 640 Pixeln, dann bedeutet das eine Pixeldichte von 200%. Soweit, so klar. Was ich jedoch nicht verstehe ist, wie passen 640 Pixel auf 320 Pixel Divice-Width? Wieso wird die Device-Widt nicht direkt auf 640 Pixel gesetzt?

Ich habe nun schon wirklich viel dazu gegoogelt aber irgendwie finde ich keine richtige Erklärung.

Gruß vom Noob.

 

[Bennyville]

Hier kann man dazu was lesen, allerdings auf Englisch:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag