如何在Jquery Mobile中水平滚动?

时间:2012-11-08 18:32:17

标签: jquery jquery-mobile horizontal-scrolling

我有一个基本的表格布局,在移动设备上查看时会被剪切掉。水平滚动似乎不起作用。该表基本上是卡住和截止。只有垂直滚动才有效。是否可以在Jquery Mobile中启用水平滚动?

桌面浏览器屏幕截图:

enter image description here

手机屏幕截图:

enter image description here

调整大小的桌面浏览器的屏幕截图(水平滚动也不起作用):

enter image description here

示例代码:

<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">水平滚动工作,但随后移动设备的宽度变大,移动视图的目的就完全失败了。任何解决方法?

1 个答案:

答案 0 :(得分: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在其他浏览器制造商之前开始使用)