2012-11-08 4 views
6

Ho un layout di tabella di base che viene tagliato quando visualizzato in dispositivo mobile. Lo scorrimento orizzontale non sembra funzionare. Il tavolo è fondamentalmente bloccato e tagliato. Funziona solo lo scorrimento verticale. È possibile abilitare lo scorrimento orizzontale in Jquery Mobile?Come scorrere orizzontalmente in Jquery Mobile?

Screenshot relativo browser desktop:

enter image description here

Schermata sul mobile:

enter image description here

Screenshot relativo al browser desktop ridimensionata (scorrimento orizzontale anche non funziona):

enter image description here

Codice

Esempio:

<div style="overflow-x:auto"> 
<table> 
     <tr> 
      <td>foo</td> 
      <td>foo</td> 
      <td>foo</td>   
     </tr> 
</table>    
</div> 

BTW se tolgo <meta name="viewport" content="width=device-width, initial-scale=1"> opere a scorrimento orizzontale, ma poi la larghezza del mobile è diventato grande e la finalità di vista Mobile è abbastanza sconfitto. Qualche soluzione?

+0

puoi caricare uno screenshot per noi essere in grado di fornire una migliore assistenza. Potresti provare a confezionarlo con un tag DIV con 'overflow-x: auto;' – Coby

+0

@Coby che non ha funzionato, ha anche aggiornato la mia domanda con gli screenshot. – IMB

risposta

1

Credo che si possa impostare il meta tag viewport su uno specifico width corrispondente al contenuto. In questo modo puoi limitare la larghezza della pagina.

<meta name="viewport" content="width=600px, initial-scale=1"> 

In senso generale, questo è visto di buon-upon dato che non è reattivo come width=device-width è, ma in questo contesto suona come quello che vi serve.

NOTA: Questo è testato, non ho mai utilizzato un valore di pixel per la dichiarazione width in un tag viewport prima. La mia comprensione è che questo dovrebbe far apparire tutto in modo predefinito, quindi l'utente può ingrandire/rimpicciolire per rendere il testo più facile da leggere.

L'alternativa ben supportata consiste nell'utilizzare il faux-scrolling con JavaScript. Esistono soluzioni predefinite come iScroll 4 (altre sono là fuori, ma al momento mi stanno sfuggendo).

Se siete interessati, ecco la documentazione Apple per il meta tag viewport: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html (che Apple ha iniziato utilizzando prima degli altri produttori di browser)