Android WebView，缩放图像以适应屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10395292/
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
Android WebView, Scaling Image to fit the screen
提问by artouiros
What I have:I'm loading image from a URL. I simply do (WebView).loadUrl(imageurl, extraheaders)
我所拥有的：我正在从 URL 加载图像。我只是做(WebView).loadUrl(imageurl, extraheaders)
What I get:Image is not showing at full width of the WebView, it has blank space all around (like if you open a little iamge in your desktop browser)
我得到的是：图像没有以 WebView 的全宽显示，它周围有空白区域（就像你在桌面浏览器中打开一个小图像一样）
What i tried:Setting LayoutAlgorithm to SINGLE_COLUMN. Works perfect, but zooming doesn't work. (I have it enabled in the WebView.getSettings()Dont know why. Setting setUseWideViewPort(true);load image without any blanks space, but it is fully zoomed in.
我尝试过的：将 LayoutAlgorithm 设置为 SINGLE_COLUMN。工作完美，但缩放不起作用。（我在“不WebView.getSettings()知道为什么”中启用了它。设置setUseWideViewPort(true);加载图像没有任何空格，但它已完全放大。
回答by Tony
You could also do something like this.
你也可以做这样的事情。
Add CSS style for imgat the beginning (depends on your web data format) of your data string.
img在数据字符串的开头（取决于您的网络数据格式）添加 CSS 样式。
<style>img{display: inline; height: auto; max-width: 100%;}</style>
To quickly do it to data in WebView i did this.
为了快速处理 WebView 中的数据，我这样做了。
WebView content = (WebView) findViewById(R.id.webView1);
content.loadDataWithBaseURL(null, "<style>img{display: inline;height: auto;max-width: 100%;}</style>" + post.getContent(), "text/html", "UTF-8", null);
It's pretty much like what bansal21ankit said, but instead it will work on every image in your HTML without extra work.
这很像 bansal21ankit 所说的，但它可以处理 HTML 中的每个图像，而无需额外工作。
Edit (clarification on post content):
编辑（对帖子内容的澄清）：
You can have any text/htmlvalue instead of post.getContent()from the example.
您可以使用任何text/html值而不是post.getContent()示例中的值。
Post content here is just an example of a text/htmlcontent which is loaded from some data source and then concatenated with the stylepart which makes any image in given content to fit the screen.
此处发布的内容只是text/html从某个数据源加载的内容的一个示例，然后与style使给定内容中的任何图像适合屏幕的部分连接。
回答by Sebastian Breit
I had the same issue and doing this worked just fine:
我遇到了同样的问题，这样做效果很好：
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
String data = "<html><head><title>Example</title><meta name=\"viewport\"\"content=\"width="+width+", initial-scale=0.65 \" /></head>";
data = data + "<body><center><img width=\""+width+"\" src=\""+url+"\" /></center></body></html>";
webView.loadData(data, "text/html", null);
Edit: As this remained as the accepted answer, here is a better solution (all credit to Tony below):
编辑：由于这仍然是公认的答案，这里有一个更好的解决方案（以下均归功于托尼）：
WebView content = (WebView) findViewById(R.id.webView1);
content.loadDataWithBaseURL(null, "<style>img{display: inline;height: auto;max-width: 100%;}</style>" + post.getContent(), "text/html", "UTF-8", null);
回答by thepoosh
you should scale the webView to fit the screen:
您应该缩放 webView 以适应屏幕：
WebView data = (WebView) getViewById(R.id.webview1);
data.getSettings().setLoadWithOverviewMode(true);
data.getSettings().setUseWideViewPort(true);
回答by Jesus Almaral - Hackaprende
What worked for me was this: I read that in order to fit the width of the screen you should add this to your HTML or xml inside the field:
对我有用的是：我读到为了适应屏幕的宽度，您应该将其添加到字段内的 HTML 或 xml 中：
width="100%"
So what I did was, instead of scaling and zooming the images, I got the xml, put it in a StringBuilder, found the src="https://blablabla.com/image.png" that is inside the field and just before the "src" substring I inserted the "width="100%"", then y set my webView with the StringBuilder, mi code is this:
所以我所做的是，而不是缩放和缩放图像，我得到了 xml，把它放在一个 StringBuilder 中，找到了字段内和之前的 src="https://blablabla.com/image.png" “src”子字符串我插入了“width="100%"”，然后用StringBuilder设置了我的webView，mi代码是这样的：
public void setWebViewWithImageFit(String content){
// content is the content of the HTML or XML.
String stringToAdd = "width=\"100%\" ";
// Create a StringBuilder to insert string in the middle of content.
StringBuilder sb = new StringBuilder(content);
int i = 0;
int cont = 0;
// Check for the "src" substring, if it exists, take the index where
// it appears and insert the stringToAdd there, then increment a counter
// because the string gets altered and you should sum the length of the inserted substring
while(i != -1){
i = content.indexOf("src", i + 1);
if(i != -1) sb.insert(i + (cont * stringToAdd.length()), stringToAdd );
++cont;
}
// Set the webView with the StringBuilder: sb.toString()
WebView detailWebView = (WebView) findViewById(R.id.web_view);
detailWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}
Hope this helps, it took me some hours to figure out how to solve this.
希望这会有所帮助，我花了几个小时才弄清楚如何解决这个问题。
回答by Ankit Bansal
Its a bit late but I hope this will help, what you can do is:
有点晚了，但我希望这会有所帮助，您可以做的是：
String html = "<html><body><img src=\"" + URL + "\" width=\"100%\" height=\"100%\"\"/></body></html>";
mWebView.loadData(html, "text/html", null);
this will make the image exactly similar to your WebView's width, rest you can adjust the WebView itself.
这将使图像与您的 WebView 的宽度完全相似，其余的您可以调整 WebView 本身。
回答by hai than hoang
Code:
代码：
web = (WebView) findViewById(R.id.at_image_web);
web.getSettings().setBuiltInZoomControls(true);
web.getSettings().setUseWideViewPort(true);
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setLoadWithOverviewMode(true);
web.loadUrl(linkImage);
回答by Jenkyn
This work for me:webView = (WebView) findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
这对我有用：webView = (WebView) findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
回答by Jenkyn
This Code Work For Me :
此代码对我有用：
String strData = "<head>" + "<style>" + ".smal-video-pnl,.smal-video-thumb,.detail-hldr{margin-left: 0px;margin-right:0px;}" + "</style>" +
"</head>" + mListItem.get(position).getTitbits();
holder.webViewStatus.loadDataWithBaseURL(null, strData, "text/html", "UTF-8", null);
回答by user755278
I think this will fix your issue:-
我认为这将解决您的问题：-
WebView web;
web = (WebView) findViewById(R.id.webkit);
web.setWebViewClient(new Callback());
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setLoadWithOverviewMode(true);
web.getSettings().setUseWideViewPort(true);
web.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
web.setScrollbarFadingEnabled(false);
