我有一个基本的表格布局,在移动设备上查看时会被剪切掉。水平滚动似乎不起作用。该表基本上是卡住和截止。只有垂直滚动才有效。是否可以在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">
水平滚动工作,但随后移动设备的宽度变大,移动视图的目的就完全失败了。任何解决方法?
答案 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在其他浏览器制造商之前开始使用)