[jonssondesign]

Hej!,

Jag sitter och försöker lära mig lite responsiv webdesign. Har gjort denna sida i testsyfte:

http://bywatt.com/pre-view/

Som ni ser så ser det okej ut när man förminskar webbläsarens storlek, och även när man går in på hemsidor som testar hemsidan i flera upplösningar.

Däremot så händer ingenting när man går in på hemsidan visa mobilen.. sidan som visas är den layout som är utvecklad för upplösningar över 978px..

Någon som vet hur detta kommer sig?

[P3N]

Borde du inte lägga reglerna så att om webbläsaren är mindre än vad layouten kräver så skall den byta till en mindre?
Som det är nu så byter regeln till den mindre layouten bara när ytan är liten nog för att den layouten precis skall passa. När den egentligen behöver byta till en mindre layout när det inte finns plats längre. Designen nu släpar efter så att säga och blir då för stor.
Vad gäller mobilen, prova att byta ut "@media (max-width: 320px)" till "@media screen and (max-width: 320px)". (Källa: http://stackoverflow.com/questions/8...-media-queries).

[P3N]

Ett tips till. För att få layouten att flyta på i mellan de olika upplösningarna använd både width och max-width (procent värde på max-width). Så flyter layouten på i mellan de olika upplösningarna/reglerna också. (Källa: http://webdesignerwall.com/tutorials...ponsive-design) (detta lär ju lösa problemet med eftersläpningen ovan )

[P3N]

Två tips till till mobilen (kommer på efterhand här ):

<meta name='viewport' content='user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0'/>

Det gör så att sidan inte visas i full size utan efter skärmens storlek.

Samt att om du sätter overflow: hidden; på wrappern så slipper man att sidan kan röra sig i sidled (testat på iPhone bara).

[jonssondesign]

Tack tack! Ska kolla detta direkt!

[jonssondesign]

<meta name='viewport' content='user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0'/>

gjorde susen! Tack!

[niklas_SWED]

Är Responsive webdesign något man bör börja jobba med och ha som regel på alla sina hemsidor man gör idag för att anpassa sidan till olika webbläsare och enheter? Eller finns det andra alternativ?

Tips på någon bra guide på nätet som man kan följa och ta efter isåfall?

[Conny Westh]

Jag tycker responsive design är en självklarhet!

[msjoedin]

Ursprungligen postat av ConnyWesth

Jag tycker responsive design är en självklarhet!

Håller med!

Här är en sida med några nyttiga länkar rörande responsive design:
http://www.hotscripts.com/blog/start...ve-web-design/

[danjel]

Om man med responsive design menar att man ska få en hyfsat avancerad layout/site att funka på mobil såväl som vanliga skärmar kan det bli rätt komplext. dvs hur ska man hantera layout/ innehåll i flera kolumner, bildstorlek m.m. Samt att saker som javascripts "onmouseover" ju inte är applicerbart på mobiler medans tex "swipe events" är det.
Generellt kan det därför vara bra att överväga att göra en separat mobil site