Wie scrollt man horizontal in Jquery Mobile?

Question

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?

Screenshots auf Desktop-Browser:

Screenshot auf Handy:

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

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?

Answer 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)