Mobiler och plattor med hög upplösning (responsiv design)
 

Hur gör man för att veta om klienten med hög upplösning är en liten 6-tums mobil, eller en 27-tums datorskärm?

T ex nya Nokia Lumia med 6-tum och 1920 x 1080 px, eller Apple iPad Mini (retina) med 8-tum och 2048 x 1536 px.

Har ni tips på en bra CSS som sorterar in olika upplösningar eller enheter? Vad brukar ni tänka på när skärmen är liten, men upplösningen samtidigt är väldigt hög?

Här är ett par sidor med exempel-CSS jag hittat, men jag är osäker på om de hanterar liten skärm ihop med hög upplösning? Eller behöver man inte tänka på det?

http://stephen.io/mediaqueries/
http://www.thismanslife.co.uk/projec...eillustration/

Är inget profs på det här men olika enheter har olika "device pixel ratio" vilket innebär att en enhet med pixelbredden 1136 och pixel ratio 2 (iphone 5s tex) tolkas som att den har bredden 568.

"device pixel ratio" kan också användas i mediaquerys så att man skickar bilder med högre upplösning till retina displayer.

Du anger det bara i dina media queries som backen säger, t ex:
Behöver du byta ut bilder i img-taggar (som ofta ger ett bättre resultat) har du http://retinajs.com/ och 100 liknande som skiljer sig lite lite grann i dess implementation och effektivitet. Går också att alltid använda en highres bild och skala ner med CSS ... men det är ett dåligt val när en stor andel av besökarna kommer vara utan retina (och de får sämre prestanda och allt som oftast sämre resultat på så sätt).

Tack för svaren!

Efter att ha läst mer så börjar det klarna lite. Det verkar som att de flesta (alla?) mobiler och plattor "låtsas" ha en upplösning på skärmen som används för CSS, även om de har en annan ofta högre fysisk upplösning. Och när det gäller Retina-skärmar blir skillnaden ännu större. För Retina-liknande skärmar bör man justera bilder, t ex enligt förslaget ovan.

Det jag saknar är en förteckning över CSS-pixlar jämfört med verkliga pixlar. Men det kanske är överdrivet och bättre att lita på att tillverkaren "låtsas" en lagom storlek även framöver?

Här är en länk till med grundläggande info:
http://learn.shayhowe.com/advanced-h...ive-web-design

Du kan förvänta dig att det blir samma beteende i framtiden utan att någon för den delen kan säga det säkert.

Det du inte löser utan specialbehandling är att du normalt sätt har för lågupplösta resurser för högre upplösta skärmar. Det är först där du behöver ta hänsyn till pixel-ration. Detta gäller både CSS-bakgrunder och IMG-taggar. Du vill inte ladda ner högupplösta bilder för lågupplösta skärmar (och allt som oftast förstöra både prestanda och resultat med omskalning), och vill inte visa lågupplösta bilder för högupplösta skärmar.

Den här var smidig. Skrollbara skärmdumpar från många olika mobiler, plattor o ett par datorer. Gick ganska snabbt att få dem.

http://www.browserstack.com/responsive