title-article
PhoneGap + jQM + CSS: un layout unico per smartphone e tablet
mobimentum

Il tutorial di oggi affronta un problema che per chi fa sviluppo mobile è più che quotidiano: la mia app deve avere un layout per smartphone, tablet o entrambi? Sempre più spesso la risposta è “entrambi” ma questo può significare dover sviluppare due diversi layout per la nostra app con tutte le sfighe che questo comporta.

Consideriamo ad esempio una classica applicazione composta da:

  • lista di oggetti
  • cliccando sull’oggetto si accede al dettaglio dell’oggetto stesso

Questo caso d’uso molto frequente può essere adattato in base al dispositivo in questo modo:

  • smartphone: due schermate, una con la lista degli oggetti, cliccando si accede a una seconda pagina con il dettaglio
  • tablet: una sola schermata divisa in due, a sinistra l’elenco degli oggetti, a destra il dettaglio

phonegap jqm responsive smartphone phonegap jqm responsive tablet

 

Con un po’ di CSS è possibile implementare un responsive layout anche in ambito PhoneGap, ecco come:

  • creiamo due pagine
    • una che contiene sia la lista che il dettaglio (#page-list): .content-primary con il dettaglio e .content-secondary con la lista
    • una che contiene solo il dettaglio (#page-details)
  • a #page-list attacchiamo un css che tramite una media query imposta la larghezza di .content-primary e .content-secondary:
    • nel caso tablet: .content-primary: 70%, .content-secondary: 30%
    • nel caso smartphone: .content-primary: 0%, .content-secondary: 100%
  • al click sull’oggetto verifichiamo se siamo su smartphone o tablet
    • nel caso tablet: carichiamo il dettaglio nel .content-primary
    • nel caso smartphone: cambiamo pagina e carichiamo il dettaglio in #page-details

Di seguito un esempio pratico con commenti per dimostrare il funzionamento. Il limite tra smartphone e tablet nell’esempio è impostato a 320px quindi per testarlo dovete ridimensionare la sezione “Result” in modo che sia più piccola di 320px (smartphone) o più grande (tablet):

http://jsfiddle.net/mobimentum/fSK3K/2/