Android 当 webview 调整大小时如何使网页适应 webview 的宽度（无需重新加载）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20674376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fit web page to webview's width when webview resizes (without reloading)
提问by Hoang Huynh
I have an HTML page and a full-screen Android webview. The HTML content is larger than the webview's visible area. I wantto fit the HTML content to the width of webview.
我有一个 HTML 页面和一个全屏 Android webview。HTML 内容大于 webview 的可见区域。我想让HTML 内容适合 webview 的宽度。
What's really important is this: when the device's orientation changes, the webview will not reload, meaning it will just resize and the content would still fitto width.
真正重要的是：当设备的方向改变时，webview 不会重新加载，这意味着它只会调整大小并且内容仍然适合宽度。
One more thing: because the content has been scaled down, user can zoom it in to a maximum scale of 100%. When the content is zoomed and orientation changes, I wantthe content to fit-width again.
还有一件事：因为内容被缩小了，用户可以将其放大到 100% 的最大比例。当内容被缩放并且方向改变时，我希望内容再次适合宽度。
Edit 1: I can change meta tags in the head of HTML, but its content remains larger than the webview's visible area. I'm supporting Android 2.3 and later.
编辑 1：我可以更改 HTML 头部的元标记，但其内容仍然大于 web 视图的可见区域。我支持 Android 2.3 及更高版本。
Edit 2: Thanks for the suggestion on responsive web design. I know what it is and I can do it. Problem is I cannot change much of the HTML content in this case.
编辑 2：感谢您对响应式网页设计的建议。我知道它是什么并且我可以做到。问题是在这种情况下我无法更改大部分 HTML 内容。
TL;DR: How to always fit a larger HTML content to a Android webview's width as the webview resizes, without reloading the content. (I can change the webview, not much of the HTML.)
TL;DR：如何在 webview 调整大小时始终将较大的 HTML 内容适应 Android webview 的宽度，而无需重新加载内容。（我可以更改 webview，而不是太多的 HTML。）
回答by Sush
do following settings
做以下设置
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setLoadWithOverviewMode(true);
回答by Meg
This may sound like a cop-out answer, but I think it depends on how you're building the rest of your site. Whenever I work on responsive sites, I use:
这听起来像是逃避问题的答案，但我认为这取决于您如何构建网站的其余部分。每当我在响应式网站上工作时，我都会使用：
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
This will do two things: width=device-widthwill find the width of your device, and send styles from your CSS that match that size (you can set styles for specific sizes in your CSS, using media queries). Initial-scale=1will make the site show up at 100% when it loads, but still give users the option to zoom in.
这将做两件事：width=device-width找到您设备的宽度，并从您的 CSS 发送与该大小匹配的样式（您可以使用媒体查询在 CSS 中为特定大小设置样式）。Initial-scale=1将使网站在加载时以 100% 显示，但仍为用户提供放大选项。
If your site is developed for a specific width, you could try using:
如果您的网站是针对特定宽度开发的，您可以尝试使用：
<meta name = "viewport" content = "width = 980 (or whatever the width you're designing for)">
<meta name = "viewport" content = "width = 980 (or whatever the width you're designing for)">
This will just scale down your site to fit the device width. Nothing super special here, users will basically just be shown mini-desktop sites.
这只会缩小您的网站以适应设备宽度。这里没什么特别的，用户基本上只会看到迷你桌面站点。
I'd recommend reading this Webdesign Tuts+article. They explain the viewport meta tag well, with examples.
我建议阅读这篇Webdesign Tuts+文章。他们通过示例很好地解释了视口元标记。
回答by KOTIOS
You need not change anything on Webview , all u need is Responsive Html Page, If you are designer then that will solve ur issue or u can post a part of ur Question with UI tag.
To built Responsive html pages u can visit : HERE
Result : You need to test on webview while creating your responsive html page, default brower of android itself reflect that ur html page is responsive or not.Once it will work in default brower in Android device then it will work in any webview in android.
Testing : you can test ur responsive html page HERE
您不需要在 Webview 上更改任何内容，您只需要响应式 Html 页面，如果您是设计师，那么这将解决您的问题，或者您可以使用 UI 标签发布您问题的一部分。
要构建响应式 html 页面，您可以访问：这里
结果：您需要在创建响应式 html 页面时在 webview 上进行测试，android 的默认浏览器本身反映了您的 html 页面是否响应。一旦它可以在 Android 设备的默认浏览器中工作，那么它就可以在 android 中的任何 webview 中工作。
测试：您可以在这里测试您的响应式 html 页面
回答by Chloe
I would have to see the source of your HTML and CSS. You have to exclusively use % sizes and never use fixed width px sizes. Then, the user can change the size of the browser and it will dynamically resize. I also use % widths because of this. It also dynamically resizes if you use CTRL-MouseWheel (zoom).
我将不得不查看您的 HTML 和 CSS 的来源。您必须专门使用 % 尺寸，切勿使用固定宽度的 px 尺寸。然后，用户可以更改浏览器的大小，它会动态调整大小。因此，我也使用 % 宽度。如果您使用 CTRL-MouseWheel（缩放），它也会动态调整大小。
回答by r3wt
Here's a tip for responsive web design, use positions instead of widths:
这是响应式网页设计的提示，使用位置而不是宽度：
For example:
例如：
html
html
<div id="somediv">I'm just a div, just a regular div.</div>
css
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;
}
The div above will automatically resize based on screen width.
上面的 div 将根据屏幕宽度自动调整大小。
