WebView after loading the Web page with JS to refresh the page, to solve the webview display image to adapt to all models

Source: Internet
Author: User

Android:

/**

* Automatic with the webviewclient
* @author Jwguo
*
*/
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 a bit web-based people can read, is to get all the HTML img tag, and then add a style width 100%, highly adaptive only.


IOS:
-(void) Webviewdidfinishload: (UIWebView *) WebView
{
[HUD Show:no];
[HUD Removefromsuperview];

[WebView stringbyevaluatingjavascriptfromstring:
@ "Javascript:var IMGs = document.getElementsByTagName (' img ');"
"for (var i = 0; i<imgs.length; i++) {"
"Imgs[i].style.width = ' 100% ';"
"Imgs[i].style.height = ' auto ';}";
}


The above is the correct approach, of course, JS code more than this one, you can play at will, let's look at other practices below.

One:

Webview.getsettings (). Setlayoutalgorithm (Layoutalgorithm.single_column);

For example, this is the most common online solution, but this is not good, because it will scale the entire site so that the width of a screen display, so the font will be smaller, so that although the picture is full screen, but the text can not see, so there is no way to only narrow the picture, not to deal with the text, But the above way is no problem.


Two:

This method is also bad.

There's a way to do this with iOS, Http://stackoverflow.com/questions/7085800/adjusting-font-size-and-image-in-uiwebview-ios

In order to facilitate the students still in the GFW, the answer to the foreigner is:

 
iOS code does not understand also has no relationship, we can probably understand, is to get the body of the HTML tag, and then modify its Style property, set the text to the original 50% (you can set to 100%), To set the scale to 0.5, it is obvious that we have scaled the other elements of the page without changing the size of the text, which is always OK, but there are two questions:

1.zoom set Scaling to 0.5 this ratio is unfounded, the original size of 0.5 is not adapted to the results of our screen, may be in some of the exact machine is not a problem, in the resolution or large or small machine, will always display incorrect.

2. This method can not be copied on Android, I do not know whether it is Android WebView kernel Chrome (after 4.4 modified kernel) or webkit problem, he correctly parsed the Zoom property, But the Webkittextsizeadjust attribute cannot be parsed correctly, so the result is obvious, and the method is no different.

Actually method two use is my solution, just use JS not very right.







WebView after loading the Web page with JS to refresh the page, to solve the webview display image to adapt to all models

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.