logo标签列表

当webview调整大小（无需重新加载）时，如何使网页适应webview的宽度？

androidwebviewresizeorientation
17
我有一个HTML页面和全屏的Android webview。HTML内容比webview的可见区域大。我希望将HTML内容适应于webview的宽度。

重要的是，当设备方向改变时，webview不会重新加载，意味着它只会调整大小，内容仍然适应于宽度。

另外一件事：由于内容已经被缩小，用户可以将其放大到最大100％的比例。当内容缩放并且方向改变时，我希望再次将内容适应于宽度。

编辑1：我可以在HTML头中更改元标记，但其内容仍大于webview的可见区域。我支持Android 2.3及更高版本。

编辑2：感谢对响应式Web设计的建议。我知道什么是响应式Web设计，并且我可以做到。问题是在这种情况下我不能太多地更改HTML内容。

简而言之，如何使较大的HTML内容始终适应Android Webview的宽度，而Webview调整大小时不必重新加载内容。(我可以更改Webview，但不能更改HTML太多。)
一些参考图片：当webview首次加载时，概览模式运行良好，但当方向改变时，页面不再以概览模式呈现了。 - Hoang Huynh
5个回答
20

进行以下设置

    webview.getSettings().setUseWideViewPort(true);
    webview.getSettings().setLoadWithOverviewMode(true);
1
谢谢，我已经这样做了，但它只能在页面首次加载时工作；当设备方向改变（webview 调整大小）时，页面将不再适合宽度。 - Hoang Huynh
1
只能翻译文本内容，不能对其进行解释。可以粘贴一些示例截图。 - Sush
在这里：当页面首次加载时，概览模式运行良好http://imgur.com/tDqaYIV，但当方向改变时，页面不再以概览模式呈现http://imgur.com/rgzwH3V。 - Hoang Huynh
需要从HTML源代码中使用响应式主题。我们使用相同的方法解决了这个问题。 - Sush
5
这可能听起来像是在回避问题，但我认为这取决于你网站的其余部分是如何构建的。每当我制作响应式网站时，我使用以下代码：<meta name="viewport" content="width=device-width, initial-scale=1">。这将执行两个操作：width=device-width将查找您设备的宽度，并从您的CSS中发送与该大小匹配的样式（您可以使用媒体查询在CSS中为特定大小设置样式）。Initial-scale=1将使网站在加载时以100％显示，但仍会为用户提供缩放选项。
如果您的网站是针对特定宽度开发的，您可以尝试使用：<meta name = "viewport" content = "width = 980 (或您设计的宽度)">。这只是将您的网站缩小以适应设备宽度。没有什么特别的，用户基本上只会看到迷你桌面站点。
我建议阅读这篇Webdesign Tuts+文章。他们用示例很好地解释了视口元标记。
谢谢，这就是我正在做的，当页面首次加载时它可以正常工作--但是我的问题是当Webview调整大小（设备方向改变）时，页面不再适合宽度。你有什么想法吗？ - Hoang Huynh
@HoangHuynh 当您加载已经旋转的设备页面时，是否可以正常加载？我知道对于一些较旧的iOS设备存在一个错误，即在旋转时无法调整大小，因此可能存在类似的问题。如果这样做不起作用，您能否编辑CSS或链接到外部CSS文件？您可能需要调整它的构建方式。 - Meg
2
您不需要在Webview上进行任何更改，您只需要一个响应式的HTML页面，如果您是设计师，那么这将解决您的问题，或者您可以使用UI标签发布您问题的一部分。
要构建响应式的HTML页面，您可以访问：此处 结果：在创建响应式HTML页面时，您需要在Webview上进行测试，Android的默认浏览器会反映您的HTML页面是否响应。一旦它在Android设备的默认浏览器中工作，它就会在任何Android Webview中工作。
测试：您可以在此处测试您的响应式HTML页面。
1
谢谢Monica，我知道响应式HTML，但我需要在webview中显示的当前HTML内容不是响应式的，因此我需要使用webview的缩放功能将其缩小。 - Hoang Huynh
问题是我无法改变HTML内容的大部分（尽管我可以更改<head>中的元标记）。 - Hoang Huynh
0

这是一个关于响应式网页设计的技巧，使用位置而不是宽度：

例如：

html

<div id="somediv">I'm just a div, just a regular div.</div>

css

#somediv {
left: 0; /*numeric value in pixels you would like this div to be from the left */
right: 0; /*same as above, except on the right */
height: 50px;
width: auto;
}

上面的 div 将根据屏幕宽度自动调整大小。

谢谢您的建议。很遗憾我无法改变HTML的大部分内容，因为它使用了绝对像素。HTML的宽度和高度都比我的设备大。我需要将整个页面缩小以适应屏幕空间。 - Hoang Huynh
0

我需要看到您的HTML和CSS源代码。您必须专门使用％大小，而不是固定的像素宽度大小。然后，用户可以更改浏览器的大小，它将动态调整大小。因此，我也使用％宽度。如果您使用CTRL-MouseWheel（缩放），它还会动态调整大小。

很遗憾，我无法更改我的HTML代码，因为它使用了绝对像素。HTML的宽度和高度都比我的设备大。我需要缩小整个页面以适应屏幕空间。 - Hoang Huynh
抱歉，您无法使用固定宽度来完成此操作。您可以将页面嵌入到正确大小的iframe中，并使用滚动条，或者尝试使用CSS缩放变换进行实验。http://www.w3.org/TR/css3-transforms/#funcdef-scale - Chloe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接