如何在webview调整大小时将网页调整到webview的宽度(无需重新加载)

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+文章。他们通过示例很好地解释了视口元标记。