使webview内容始终适合屏幕宽度

时间:2016-02-05 16:54:16

标签: android html css webview

我有一个网页,其中包含一个表格中的数据,我希望通过webview在我的Android应用中查看。我的问题是表格的宽度不同,有时是400px,有时是1000px。我试图使它无论宽度如何,表填充webview,以便用户不必放大或缩小,或水平滚动。我在Galaxy s2上工作,但在Nexus 5x等其他设备上,页面开始缩小,用户必须放大甚至读取任何内容。缩小,内容只占屏幕的50%,而且我不知道所有额外空间的来源。

以下是我设置的使其适用于Galaxy s2的步骤:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=.1" />

这使得它开始一直缩放,当内容只有400px时,它看起来不会缩小。

Android Webview:

WebSettings settings = w.getSettings();
settings.setJavaScriptEnabled(true);
settings.setAllowFileAccess(true);
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(false);
settings.setUseWideViewPort(true);

useWideViewPort是唯一能让用户缩小到不必水平滚动的方法。

以下是我的Galaxy s2上的样子,这是页面加载的方式,用户无法再缩小,然后当页面有表格(不在屏幕截图中)时,相同的页面会进一步缩小以适应该表使其占据屏幕宽度的100%。我究竟想要它:

galaxys2 screenshot

Nexus 5x上的相同页面看起来像这样,缩小了,当桌子在那里时,它甚至不占据屏幕宽度的一半:

nexus5x screenshot

任何帮助都表示赞赏,我们试图搞砸config / meta标签,只是为了让它在Galaxy上工作。

将表格设置为100%只会使其拉伸以填充nexus屏幕,这会使文本太小而列太远。

编辑为了澄清,我采用了水平屏幕截图,因为我知道如果内容的宽度不足以适应正常缩放的设备屏幕,那么它会添加空格,没关系。我的问题是两个截图都被缩小到了可能的范围,我想知道为什么第二个甚至能够缩小到那么远,以及如何防止它。

Edit2:作为临时修复,我将视口宽度设置为两个值中的一个,具体取决于屏幕是宽还是窄。我将所有内容设置为100%宽度,但视口宽度设置为400或1000,具体取决于表的内容是否更大:

<meta name="viewport" content="width=<?php echo ($wideContent?"1000":"400"); ?>, initial-scale=.1" />

这个目前正在使用,但是将来我需要更多的宽度,如果只是自动调整它会更好。

0 个答案:

没有答案