jquery - 如何在 Jquery Mobile 中水平滚动？

Question

我有一个基本的表格布局，在移动设备中查看时会被剪切。水平滚动似乎不起作用。 table 基本卡住了，断了。仅垂直滚动有效。是否可以在 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">水平滚动有效，但移动设备的宽度变大，移动设备 View 的目的就完全落空了。有什么解决办法吗？

Answer 1

我相信您可以将 viewport 元标记设置为与您的内容匹配的特定宽度。这样您就可以限制页面的宽度。

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

一般来说，这是不受欢迎的，因为它不像 width=device-width 那样响应，但在这种情况下，它听起来像是您所需要的。

注意:这是未经测试的，我以前从未在 viewport 标记中使用过 width 声明的像素值。我的理解是，这应该使所有内容默认显示，然后用户可以放大/缩小以使文本更易于阅读。

得到良好支持的替代方案是使用 JavaScript 的假滚动。有一些预制的解决方案，例如 iScroll 4(其他也有，但目前我不知道)。

如果您有兴趣，这里是 viewport 元标记的 Apple 文档:http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html (Apple 在其他浏览器制造商之前开始使用)