Shulou(Shulou.com)06/02 Report--

This article will explain in detail about Android adaptation using webview after loading the picture shows too large solution, the quality of the article content is high, so Xiaobian share for everyone to make a reference, I hope you have a certain understanding of related knowledge after reading this article.

preface

Recently, in the development process, we need to use webview control to display the details page of the article. The process is to request background data, and then load it with the control. The article details page returned in the background is directly used by the web page, and there is no adaptation to the mobile terminal. As a result, the picture displayed in the article details after webview loading is too large, and we need to move left and right to view the complete picture. This obviously gives the user a very poor experience. At this time, we need to adapt the mobile terminal.

Let's look at the effects before adaptation:

We can see that the images in the loaded article details only show part of it.

Here's a look at the solution:

The basic use of webview flow here I will not repeat the description, this article is aimed at the article details after loading the situation, here we use the method is: through the js script, reset the width and height of the image in the img tag.

Use steps:

1. This method needs to use js, so the following sentence must be added to the webview setting property, otherwise it will be invalid.

webView.getSettings().setJavaScriptEnabled(true);//javascript supported

2. Reset WebViewClient for webview

webView.setWebViewClient(new ArticleWebViewClient());

Rewrite the onPageFinished method of WebViewClient

private class ArticleWebViewClient extends WebViewClient { @Override public void onPageFinished(WebView, String url) { super.onPageFinished(view, url); //Reset image size of img tag in webview imgReset(); } @Override public boolean shouldOverrideUrlLoading(WebView, String url) { view.loadUrl(url); return true; } } /** * **/ private void imgReset() { webView.loadUrl("_javascript:(function(){" + "var objs = document.getElementsByTagName ('img '); " + "for(var i=0;i

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.