如何在Jquery Mobile中水平滾動？

Question

我有一個基本的表格佈局，當在移動設備上查看時會被剪切。水平滾動似乎不起作用。該表基本上被卡住和切斷。只有垂直滾動纔有效。是否有可能在JQuery Mobile中啓用水平滾動？

截圖在桌面瀏覽器：

截圖移動：

截圖上調整大小的桌面瀏覽器（水平滾動也不起作用）：

示例代碼：

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

順便說一句，如果我刪除<meta name="viewport" content="width=device-width, initial-scale=1">水平滾動的作品，但隨後移動的寬度已經成爲大和移動視圖的目的是相當失敗。任何解決方法？

Answer 1

我相信你可以在你的viewport meta標籤設置爲特定width您的內容相匹配。這樣你可以限制你的頁面變得多寬。

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

在一般意義上，因爲它這是皺起了眉頭，在不響應像width=device-width只是在這種情況下，它聽起來就像你所需要的。

注意：這是未經測試的，我從來沒有使用width標籤width聲明之前的像素值。我的理解是，這應該使所有內容默認顯示，然後用戶可以放大/縮小，使文本更易於閱讀。

的良好支持的替代方法是使用JavaScript的人造滾動。有預先製作的解決方案，如iScroll 4（其他人也在那裏，但他們目前正在逃避我）。

如果你有興趣，這裏是爲viewport meta標籤的蘋果文檔：http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html