Question

我有一个HTML页面和一个全屏Android webview。 HTML内容比webview的可见区域大。我希望使HTML内容符合webview的宽度。

真正重要的是：当设备的方向发生变化时，webview将不会重新加载，这意味着它只会调整大小并且内容仍然适合宽度。

还有一件事：因为内容已按比例缩小，用户可以将其放大到最大比例为100％。当内容缩放并且方向发生变化时，我希望内容再次适合宽度。

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

编辑2 ：感谢有关响应式网页设计的建议。我知道它是什么，我可以做到。问题是在这种情况下我不能改变很多HTML内容。

TL; DR ：如何在不重新加载内容的情况下随着webview调整大小，将更大的HTML内容整合到Android webview的宽度。（我可以更改webview，而不是HTML。）

Answer 1

执行以下设置

    webview.getSettings().setUseWideViewPort(true);
    webview.getSettings().setLoadWithOverviewMode(true);

Answer 2

这可能听起来像是一个警察的答案，但我认为这取决于你如何构建你网站的其余部分。每当我在响应式网站上工作时，我都会使用：

<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 (or whatever the width you're designing for)">

这会缩小您的网站以适应设备宽度。这里没什么特别的，用户基本上只会看到迷你桌面网站。

我建议您阅读这篇Webdesign Tuts+文章。他们用示例解释了视口元标记。

Answer 3

您无需在Webview上进行任何更改，您只需要响应即可   Html页面，如果你是设计师，那么将解决你的问题或你可以   使用UI标记发布您的问题的一部分。

要构建响应式HTML页面，您可以访问：HERE

结果：您需要在创建响应时进行webview测试   html页面，android本身的默认浏览器反映了你的html页面   响应与否。一旦它在Android中的默认浏览器中工作   然后它将在android中的任何webview中工作。

测试：你可以测试你的响应式html页面HERE

Answer 4

我必须看到你的HTML和CSS的来源。您必须专门使用％尺寸，并且永远不要使用固定宽度px尺寸。然后，用户可以更改浏览器的大小，它将动态调整大小。因为这个我也使用％宽度。如果使用CTRL-MouseWheel（缩放），它也会动态调整大小。

Answer 5

以下是响应式网页设计的提示，使用位置而不是宽度：

例如：

<强> 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会根据屏幕宽度自动调整大小。

如何在webview调整大小时将网页适合webview的宽度（无需重新加载）

5 个答案: