Come adattare il layout in base al dispositivo

[Graceimpagina]

Ciao a tutti,
mi sono appena registrata sul forum ma vi seguo da parecchio tempo.. quasi tutti i miei dubbi vengono risolti dai vostri preziosi consigli!
Ho creato da pochi giorni la versione mobile del mio sito www.graceimpagina.it
Sono alle prime armi con lo sviluppo dei siti (mi occupo principalmente di grafica tradizionale cartecea e di grafica web) quindi non siate troppo cattivi quando analizzerete il codice sorgente della mia pagina!
Ho inserito uno script che mi permetta di reindirizzare l'utente mobile alla versione mobile del mio sito: ora però ho un problema!
Non so come fare ad impostare l'adattamento automatico del layout.
In pratica su iPhone la mia pagina viene ridotta e visualizzata in alto a sinistra; come posso impostare l'adattamento automatico in base alla larghezza del telefono?
Ho provato con il meta tag viewport ma non funziona!
Grazie in anticipo a chi mi saprà aiutare!

[codencode]

Puoi procedere in due modi:
- realizzare un css dedicato ai dispositivi mobili, che tenga conto delle visualizzazioni potrait e landscape, e caricarlo quando si accede da questi device;
- realizzare un layout fluido e gestirlo a seconda che il media sia il monitor del computer oppure il display di un dispositivo mobile.

[Graceimpagina]

Originariamente inviato da codencode
Puoi procedere in due modi:
- realizzare un css dedicato ai dispositivi mobili, che tenga conto delle visualizzazioni potrait e landscape, e caricarlo quando si accede da questi device;
- realizzare un layout fluido e gestirlo a seconda che il media sia il monitor del computer oppure il display di un dispositivo mobile.

Innanzitutto grazie per la risposta!
In realtà ho già previsto due versioni con relativi css (uno per la versione desktop e l'altra per la versione mobile).
La versione mobile puoi visualizzarla qui http://www.graceimpagina.it/index_mobile.html
Il problema è che non so come far adattare questo layout in base alla larghezza dei vari smartphone!
Spero di essermi spiegata meglio..

[codencode]

Basta che trasformi il layout del css della versione mobile in un layout fluido. In tal modo, aprendolo da uno smartphone in modalità potrait o landscape, si adatterà automaticamente alle dimensioni del display.

[Graceimpagina]

Originariamente inviato da codencode
Basta che trasformi il layout del css della versione mobile in un layout fluido. In tal modo, aprendolo da uno smartphone in modalità potrait o landscape, si adatterà automaticamente alle dimensioni del display.

Ok, grazie mille! Ci proverò..

[Megatron]

Ciao ragazzi, adesso il nuovo approccio sono i layout responsive che fanno uso delle media query nei css per manipolare il layout in base alla risoluzione del dispositivo.
Per capire meglio di cosa parlo, date un'occhiata a questo sito: http://www.trentinotravel.com

Se provate ad accedere con disporitivi a diversa risoluzione o fate un resize della finestra del browser, noterete oltre al comportamento fluido, il resize di immagini, alcune parti meno importanti diventano invisibili, la spalla destra delle pagine interne va in coda, o per esempio il menu di navigazione a risoluzioni da smartphone diventa un bottone.

Saluti