如何在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（其他也有，但目前我不知道）。

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