如何在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元标记设置为与您的内容相匹配的特定width。这样您就可以限制页面的宽度。

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

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

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

支持良好的替代方案是使用JavaScript进行虚假滚动。有像iScroll 4这样的预制解决方案（其他也在那里，但他们现在正在逃避我。）

如果您有兴趣，请参阅以下viewport元标记的Apple文档：http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html（Apple在其他浏览器制造商之前开始使用）