Rätt responsivitet

[.M]

Jag har gjort en liten grejsimojs med html5, css3 och responsiv design. Dock får jag nu samma mobilanpassade utseende på både mobiltelefon och ipad. Antagligen för att vissa mobiler nu för tiden har så pass hög upplösning att dom matchar ipad. Dvs device-width 768px.

 

Några förslag på hur jag kan separera dessa på enklast möjliga vis? Så jag får utseende för små skärmar på mobil men lite större för ipad?

[Jonas__B]

Din grejsimojs, bygger den på ett befintligt html/css-ramverk eller har du byggt eget?

 

Kolla gärna hur Zurb Foundation eller Twitter Bootstrap gjort i dessa fall, de har väl tänkt på detta, antar jag.

[.M]

Jag använder jquery mobile. Men gjort lite modifieringar, främst för sliderkontrollen. Jag petar in en enhet kr, % etc mellan textboxen och själva reglaget. Men vid små skärmar, typ lurar så flyttar jag upp enheten så den ligger ovanför istället. Så det blir lite mer utrymme för reglaget.

 

Och det är det jag försöker klura på, hur jag ska identifiera enheter med små skärmar. Upplösningen hänger ju tyvärr inte ihop med skärmstorlek alla gånger.

[Jonas__B]

Jag har inte tittat på jQuery Mobile på ett bra tag (sedan RC1).

 

Även om pixeldesiteten är högre på en skärm så är storleken "rätt". Så är det iaf för iPhone 4 resp 5. Samsung misstänker jag gör lite fel här och det är synd för det blir svårare att styra för dessa skärmar.

 

Jag har dessvärre ingen lösning på problemet.

[Thir13teen1]

Fick du pli på det här? Det här är en bra sida som förklarar det här med retina och liknande galenskaper: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml#.UkQswIZcXU8

Finns ett kodexempel för att targeta retina med -webkit-min-device-pixel-ratio: 2

 

http://www.webbdesignguiden.se/