Responsive design, max-width en nieuwe Full-HD telefoons

[mpol]

Hallo,

Op mijn werk zijn we dit jaar bezig geweest om responsive design te gebruiken. Wat we vooral gebruiken is de media-query max-width met een voorwaarde in pixels.
Nu komen er nieuwe telefoons uit, en die gaan vaak naar Full-HD resolutie. Dat betekent dat ze gewoon de desktop versie te zien krijgen op hun HTC Butterfly, of wat voor toestel dan ook. Op een tablet is dat geen probleem, maar responsive design is oa. vooral voor smartphones.
Ik heb niet zo'n telefoon, maar kan me ook voorstellen dat er op zo'n toestel gewerkt wordt met dubbele dpi, elke css-pixel is 4 hardware-pixels, net als bij Apple. Zijn er mensen die weten hoe Android, Windows Phone en BB 10 hiermee omgaan?

Nu bestaat er ook een media-query voor max-width in inches. Het lijkt me dat dat goed bruikbaar is, maar ik vraag me dan af of dat wel toekomst-bestendig gaat zijn, en of daar geen andere nadelen aan zitten.

Hoe kijken jullie hier tegen aan? En hoe gebruiken jullie de max-width voorwaarde?

[Anoniem: 2935]

Ik raad je aan om deze presentatie van PPK eens te bekijken. Die beantwoordt al je vragen.

[mpol]

Ah, dus browsers gebruiken device independent pixels om max-width te berekenen.
Dan neem ik aan dat het veilig blijft om te gebruiken.

[Bosmonster]

Yes. Om je een eenvoudig voorbeeld te geven. Een retina iPad geeft je ook nog steeds 1024 terug, ook al istie 2048.

Hoe dat bij een Full HD scherm gaat werken weet ik niet, hoop niet dat ze denken dat ik assets ga ontwerpen/ontwikkelen voor dergelijke pixel ratio's.

[mpol]

Om hier nog eens op terug te komen...

Kort na het plaatsen van dit topic heb ik een kort scriptje geschreven om de css pixes gewoon weer te geven op het apparaat. De meest betrouwbare methode .

De url van het artikel is hier:
http://timelord.nl/wordpr...n-de-viewport-in-css.html
Het script zelf:
http://timelord.nl/scripts/viewport.php

Zijn er mensen met telefoons onder de 5" en een Full-HD scherm die willen vertellen wat de onderste regel van de script-uitvoer zegt? En vertel even welk toestel en schermresolutie je hebt. Het script gaat maar tot 1199 pixels breedte.

[C0rnelis]

mpol schreef op vrijdag 29 maart 2013 @ 10:09:
Om hier nog eens op terug te komen...

Kort na het plaatsen van dit topic heb ik een kort scriptje geschreven om de css pixes gewoon weer te geven op het apparaat. De meest betrouwbare methode .

De url van het artikel is hier:
http://timelord.nl/wordpr...n-de-viewport-in-css.html
Het script zelf:
http://timelord.nl/scripts/viewport.php

Zijn er mensen met telefoons onder de 5" en een Full-HD scherm die willen vertellen wat de onderste regel van de script-uitvoer zegt? En vertel even welk toestel en schermresolutie je hebt. Het script gaat maar tot 1199 pixels breedte.

Is HD-ready ook goed? Meizu MX2 vertelt in portrait 400px, in landscape 640px. De browser geeft van dit retina scherm (1280x800 @ 4.4") dus gewoon de helft door van de daadwerkelijke resolutie.

[Bosmonster]

Oftewel een pixelRatio van 2. Snap dat ingewikkelde script niet.

Vraag gewoon de pixelRatio op of de breedte van het scherm