After the WebView loads the webpage, use js to refresh the webpage, so that the webview display image can be adapted to all models.

After the WebView loads the webpage, use js to refresh the webpage, so that the webview display image can be adapted to all models.

Android:

/**

* Automatically sent webviewclient
* @ Author yaoguo
*
*/
Private class MyWebViewClient extends WebViewClient {


@ Override
Public void onPageFinished (WebView view, String url ){
// TODO Auto-generated method stub
View. loadUrl (javascript: var imgs = document. getElementsByTagName ('img '); for (var I = 0; I}


@ Override
Public boolean shouldOverrideUrlLoading (WebView view, String url ){
// TODO Auto-generated method stub
View. loadUrl (url );
Return true;
}

}

Webview. setWebViewClient (new MyWebViewClient ());

In this way, the injected js code can be understood by people who have a little knowledge about the web, that is, to obtain all img tags in html, and then add a style 100% in width, which is highly adaptive.

 

 

IOS:
-(Void) webViewDidFinishLoad :( UIWebView *) webView
{
[HUD show: NO];
[HUD removeFromSuperview];

[WebView stringByEvaluatingJavaScriptFromString:
@ Javascript: var imgs = document. getElementsByTagName ('img ');
For (var I = 0; I imgs [I]. style. width = '000000 ';
Imgs [I]. style. height = 'auto';}];
}

 

 

The above is the correct method. Of course, js Code is more than this one, you can play it freely,Next let's take a look at other practices.

I:

Webview. getSettings (). setLayoutAlgorithm (LayoutAlgorithm. SINGLE_COLUMN );

For example, this is the most common solution on the Internet, but this is not good, because it will scale the entire website so that the screen width is displayed, so the font will become smaller, although the image is displayed in full screen mode, the text is invisible, so there is no way to narrow down the image without processing the text, but the above method is correct.

 

II:

This method is also not good.

There is such a solution for IOS,

For the convenience of those who are still in GFW, the answer from foreigners is:

 

(void)webViewDidFinishLoad:(UIWebView *)wView {    [wView stringByEvaluatingJavaScriptFromString:@document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '50%'];    [wView stringByEvaluatingJavaScriptFromString:@document.getElementsByTagName('body')[0].style.zoom= '0.5'];}

IOS code does not understand and does not matter. We can roughly understand that it is to get the html body tag and then modify its style attribute, set the text to the original 50% (you can set it to 100%) and set the zoom ratio to 0.5. Obviously, we have scaled other elements of the page, I haven't changed the text size. This is all right, but there are two problems:

 

1. zoom sets the zoom to 0.5 ratio. The original size of 0.5 is not the result of adapting to our screen. It may be okay on some machines, on a machine with a resolution of either large or small, the error is always displayed.

2. this method cannot be copied on android. I don't know whether it is android's webview kernel chrome (kernel modified after 4.4) or webkit. He correctly Parsed the zoom attribute, however, if the webkitTextSizeAdjust attribute cannot be correctly parsed, the result is obvious and there is no difference with method 1.

Actually, method 2 uses my solution, but js is not quite correct.