2012-11-08 7 views
6

Ich habe ein einfaches Tabellenlayout, das abgeschnitten wird, wenn es auf Mobilgeräten angezeigt wird. Horizontales Scrollen scheint nicht zu funktionieren. Der Tisch ist im Grunde fest und abgeschnitten. Nur vertikales Scrollen funktioniert. Ist es möglich, horizontales Scrollen in Jquery Mobile zu aktivieren?Wie scrollt man horizontal in Jquery Mobile?

Screenshots auf Desktop-Browser:

enter image description here

Screenshot auf Handy:

enter image description here

Screenshots auf Größe veränderten Desktop-Browser (horizontale Scroll funktioniert auch nicht):

enter image description here

Beispielcode:

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

BTW, wenn ich <meta name="viewport" content="width=device-width, initial-scale=1"> horizontales Scrollen funktioniert entfernen, aber dann die Breite des mobilen hat groß und der Zweck der mobilen Ansicht geworden ist ziemlich besiegt. Irgendeine Problemumgehung?

+0

Betrachten Sie einen Screenshot hochladen für uns in der Lage, besser zu sein, Sie zu unterstützen. Sie könnten versuchen, es mit einem DIV-Tag mit 'overflow-x: auto;' – Coby

+0

@ Coby das hat nicht funktioniert, auch meine Frage w/Screenshots aktualisiert. – IMB

Antwort

1

Ich glaube, Sie könnten Ihre viewport Meta-Tag auf eine bestimmte width, die Ihren Inhalt entspricht. Auf diese Weise können Sie die Breite Ihrer Seite begrenzen.

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

In einem allgemeinen Sinne ist dies, da es verpönt nicht reagiert, wie width=device-width ist aber in diesem Zusammenhang klingt es wie das, was Sie brauchen.

HINWEIS: Diese ungetestet ist, habe ich nie einen Pixelwert für die width Deklaration in einem viewport Tag vor. Mein Verständnis ist, dass dies alles standardmäßig erscheinen lassen soll, dann kann der Benutzer hinein-/hinauszoomen, um den Text leichter lesbar zu machen.

Die gut unterstützte Alternative ist das Faux-Scrolling mit JavaScript. Es gibt vorgefertigte Lösungen wie iScroll 4 (andere sind auch da draußen, aber sie entkommen mir im Moment).

Wenn Sie interessiert sind, hier ist die Apple-Dokumentation für den viewport Meta-Tag: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html (den Apple-verwenden, bevor andere Browser-Hersteller gestartet)