• ModSenior

    Se hai fretta allora i css sono sicuramente il modo più veloce.
    Queste sono le modifiche che devi fare.
    Nella sezione head delle pagine xhtml, dove dichiari il css, sostituiscilo con queste istruzioni:

    <link href="desktop.css" rel="stylesheet" type="text/css" media='screen and (min-width: 481px)'/>
    <link href="mobile.css" rel="stylesheet" type="text/css" media='screen and (max-width: 480px)'/>

    Ecco come funziona.
    La prima riga carica e associa alla pagina il file chiamato desktop.css (il tuo attuale file css) solo se è visualizzata su uno schermo la cui larghezza minima è 481px. Quindi per tutti gli schermi più grandi di 480px applica il css per i desktop.

    La secondo riga invece carica e associa il file chiamato mobile.css solo se la pagina è visulizzata su schermi con larghezza inferiore.

    Per provare creati un file css vuoto chiamato mobile.css e fai la prova. Funziona anche provando a ridimensionare la finestra del browser senza che tu debba testare tutto sull'Iphone.
    Usa per un browser moderno, Chrome, Safari o Firefox.

    Non ho capito invece la tua seconda domanda, questa:
    @DanielaM said:

    perche il layout deve essere flessibile vero?

    Valerio Notarfrancesco


  • User

    Grazie grazie mille valerio mi sei stato di grandissimo aiuto! 😄 😄

    no la mia seconda domanda si riferifa al fatto che in giro vedo spesso che parlando di media queries, parlano di layout flessibili e quindi mi chiedevo se dovessi cambiare il mio con un layout flessibile.


  • ModSenior

    Intanto il tuo attuale layout non lo tocchi per niente, quindi il tuo lavoro è preservato.
    Devi crearti un nuovo css per l'Iphone, e dato le dimensioni dello schermo proprie di uno smartphone alcune tecniche che vanno bene per i desktopo non sono applicabili, o risulterebbero poco pratiche per l'utente.
    Io partirei con un layout flessibile per il css mobile.

    Valerio Notarfrancesco


  • User

    Ciao Valerio scusami il ritardo 🙂 ......comunque grazie mille davvero gentile!

    quindi per renderlo flessiblile potrei usare misure in percentuali?


  • ModSenior

    Si, esatto in percentuale perché in questo modo si può adattare quando l'Iphone viene usato in orizzontale senza dover predisporre un altro css solo per questo caso.
    Per completezza, nel caso tu volessi invece usare un css solo quando lo schermo è girato, puoi usare sempre con i media query usando la proprietà orientation:landscape.

    Un altro vantaggio è che il sito si può adattare anche a tutta la miriade di altri smartphone con schermi e risoluzioni differenti.

    Valerio Notarfrancesco


  • User

    Ciao Valerio ti ringrazio davvero!!! 🙂 sono riuscita a farlo e mi e riuscito perfettamente, ne ho fatto uno con le media queries e un altro con JQTouch, solo un ultima cosa quello con le media queries non c' è nessun problema di visualizzazzione proprio perché prende un altro css, il mio problema è per l'altro sito in JQTouch come faccio a far si che si colleghi a quello quando sono con un iPhone?


  • ModSenior

    Prego davvero.
    Allora devi rilevare il dispositivo che visualizza il tuo sito, cioè se è un computer desktop oppure un dispositivo mobile e in base a questo dirottare la visita sulla versione normale del sito oppure sulla versione mobile.

    Per farlo devi usare un linguaggio lato server. Tu sul tuo server cosa hai a disposizione tra php, asp, ruby, ecc. ecc?

    Valerio Notarfrancesco


  • User

    Nel mio server ho linguaggio php!
    Poi mi avevano parlato anche di uno script php che fa il redirect....e quello che serve?


  • ModSenior

    Hai il php? Perfetto.
    Usa allora lo script php "Detect Mobile User Agents & Browsers” che trovi qui detectmobilebrowsers.mobi

    Valerio Notarfrancesco


  • User

    Ciao Valerio di grande aiuto ancora una volta, Grazie!
    un ultima cosa, mi chiedevo se esistesse il modo per fare una galleria per un sito fatto con il framework JQTouch senza usare php?

    Grazie


  • ModSenior

    Prego Daniela.
    Non conosco JQTouch, preferisco fare le cose a mano. Adesso non so consigliarti uno script in particolare per una galleria, ma se dovessi realizzarne uno partirei dagli esempi messi a disposizione dalla mamma: http://developer.apple.com/safaridemos/

    Il problema maggiore nell'usare javascript sugli smartphone, perfino sul potente Iphone4, è che basta davvero pochissimo per rendere il sito lento e scattoso rovinando così l'esperienza utente e facendo crollare il rendimento del sito.

    Valuta anche l'uso di un video Quicktime, so che non è la stessa cosa, ma a te o al cliente potrebbe piacere ugualmente.

    Valerio Notarfrancesco