6

我有一个基本的表格布局，在移动设备中查看时会被剪掉。水平滚动似乎不起作用。桌子基本上被卡住并被切断。只有垂直滚动有效。是否可以在 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">了水平滚动作品，但手机的宽度变大了，移动视图的目的就被彻底打败了。任何解决方法？

4

1 回答 1

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 之前开始使用其他浏览器制造商）

于 2012-11-08T20:34:38.527 回答