WebView is used in many apps, especially when loading data in the form of articles such as news content. editing and displaying in iOS is a big problem because of the graphics and text blend and the display of different font formats (of course, coretext can also be used in iOS), but for the web, a rich text editor can solve this problem perfectly. So in the background a lot of times will directly return HTML code to the front-end parsing, at this time, the client to the HTML code processing is particularly important.
In this article, we will explain the self-adapting size of the image and the automatic wrapping of the article content when WebView loading HTML code.
Sample Demo:
Https://github.com/saitjr/WebViewLoadHTMLImageAdaptiveDemo.git
Environmental information:
Mac OS X 10.10.1
Xcode 6.1.1
IOS 8.1
Body:
First, look at the original.
Original size
In the HTML code to set the content style, generally use CSS or JS, then depending on the loading priority and loading effect, you can choose.
In the Web front-end, which is HTML, if you only set the width of the picture, the height is scaled according to the original size of the picture.
If the HTML code returned in the background does not contain the
<head><style>img{width:320px !important;}</style></head>
：
Each picture is the same width
If you need to base on the original size of the picture, the width is less than 320px of non-scaling, larger than 320px to 320px, then add the code before the HTML string:
<head><style>img{max-width:320px !important;}</style></head>
：
Scaling beyond the Set range
2. Using JS for Image adaptiveIn the WebView agent, execute the JS code. (The following code is required to have a
If you don't have a
- (void) Webviewdidfinishload: (UIWebView *) WebView {[WebView stringbyevaluatingjavascriptfromstring: @ "var script = Document.createelemen T (' script '); "Script.type = ' text/javascript ';" "script.text = \" Function resizeimages () {" " var myimg,oldwidth,oldheight; " "var maxwidth=320;" //Picture width "for (i=0;i maxwidth) {" "myimg.width = MaxWidth;" "}" "}" "}\";" "document.getElementsByTagName (' head ') [0].appendchild (script);"]; [WebView stringbyevaluatingjavascriptfromstring:@ "resizeimages ();"];} The text wrapping is also implemented through CSS, similar to the way the picture is scaled in writing. In the absence of <body> tags, before the HTML code, directly splicing the following code (if it contains <body>, then add the code inside the body tag), meaning that the entire content is wrapped automatically.
<body width=320px style=\"word-wrap:break-word; font-family:Arial\">
Here, the most basic image adaptation and the article automatically wrap the end, which will also introduce a lot of practical technology, such as iOS8 in the Wkwebview, jsbinding, CommonJS, iOS use HTML template engine, etc., I will also in the next article, one by two.
"IOS" WebView load HTML picture size adaptive with article wrapping
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
