Set width of HTML UIWebView

Question

Can I programmatically set the width of the HTML file that I throw into the UIWebView? My problem is that the UIWebView frame is set in a UITableViewCell, so I had to set CGRectMake to fit it in the cell. But now the size of the content is bigger than the frame. Can I set the width in the UIWebView for the HTML?

My HTML Code:

<div id="attachment_16505" class="wp-caption alignnone" style="width: 460px"><img src="http://www.floorballmagazin.de/wp-content/uploads/2013/03/20130303_schweiz.jpg" alt="Maßgeblich beteiligt - Mathias Hofbauer sprang von der Strafbank und netzte zum 3:1 ein. / Foto: Hans Ulrich Muelchi, Swiss Unihockey" width="460" height="318" class="size-full wp-image-16505 colorbox-16504" /> <p class="wp-caption-text">Maßgeblich beteiligt &#8211; Mathias Hofbauer sprang von der Strafbank und netzte zum 3:1 ein. / Foto: Hans Ulrich Muelchi, Swiss Unihockey</p> </div> <p><em>In der Schweiz kann Wiler sein historisches Ausscheiden aus den Playoffs mit einem versöhnlichen Cupsieg kurieren. Vor über 3.000 Zuschauern besiegen die Berner Grünenmatt mit 3:1. Bei den Damen kann Sandra Dirksen ihren Titelreigen nicht fortsetzen, die Red Ants brachten eine versprechende Führung nicht über die Runden.</em></p> <p>Als Wilers Kapitän Mathias Hofbauer in 56. Spielminute auf die Strafbank wanderte, wurde es nochmal eng für den noch aktuellen Meister. Sein Unterzahlspiel überstand man aber mit Bravour und als Hofbauer wieder zurück aufs Feld durfte, dauerte es gerade mal sechs Sekunden und der WM-Rekordscorer machte mit einem scharfen Schlenzer alles klar.</p> <p>Bei den Damen waren Deutschlands Ex-Nationalspielerin Sandra Dirksen und ihre Red Ants auf dem Weg zum vierten Cupsieg in Folge. Rychenberg führte zu Beginn des Schlussdrittels mit 2:0, brach aber ein und unterlag Chur mit 2:5. &#8220;Wer den Pokal mit nach Hause nehmen will, muss drei Drittel gut spielen und nicht nur zwei&#8221;, bedauert Dirksen.</p> <p>&#8220;Wir hatten zwar den besseren Start, aber am Ende doch nur Silber. Fünfzehn Sekunden vor der 2. Drittelspause haben wir ein abgelenktes, unglückliches Tor kassiert, das war der Knackpunkt leider.&#8221; Dafür sei man umso motivierter für die bevorstehenden Play-Offs. &#8220;Die Atmosphäre bei einem Cup-Finale ist und bleibt einzigartig. Unsere Fans waren toll&#8221;, schätzt Dirksen.</p>

This is what happens in the cell:

score 3 · Answer 1 · edited May 23 '17 at 12:17

3

One solution is to intercept your HTML and prepend:

<html>
<head>
<style>div {max-width: 460px;}</style>
</head>
<body>
<div>

And append:

</div>
</body>

Take a look at this question/answer (HTML Content fit in UIWebview without zooming out) from a while back. I posted some code there.

edited May 23 '17 at 12:17

Community

1
1

answered Mar 16 '13 at 14:17

mprivat

21,582
4
54
64

Yeah, it works almost, but the image is bigger than the cell again... I think it is because in the image
there is a width: 460px. Do you have an advice how to set the maximum width of the image too ?
– Mar 16 '13 at 19:27

score 2 · Answer 2 · answered Mar 16 '13 at 14:13

2

You could either try to set the height of the HTML contents within your HTML code equals to UIWebView. Otherwise try this command to set the size of UIWebView fitting to the page

webView.scalesPageToFit = YES;

answered Mar 16 '13 at 14:13

nsgulliver

12,655
23
43
64

It works almost too. The image is no perfectly sized but the text is now unreadable because it's too small... – Mar 17 '13 at 07:36

score 0 · Answer 3 · answered Mar 16 '13 at 14:24

One solution can be :

Load the URL Request

NSString *urlAddress = @"your URL";
NSURLRequest *requestObj = [NSURLRequest requestWithURL:[NSURL URLWithString:urlAddress]];
[self.webView loadRequest:requestObj];  
self.webView.delegate = self;

Then implement WebViewDidFinishDownload delegate to correctly set the scale factor/zoom level

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
  CGSize contentSize = webView.scrollView.contentSize;
  CGSize viewSize = self.view.bounds.size;

  float sfactor = viewSize.width / contentSize.width;

  webView.scrollView.minimumZoomScale = sfactor;
  webView.scrollView.maximumZoomScale = sfactor;
  webView.scrollView.zoomScale = sfactor;  
}

Hope this Helps !!!

lol copy and paste an answer from http://stackoverflow.com/questions/10666484/html-content-fit-in-uiwebview-without-zooming-out seriously? >_ — emotality, Jul 13 '14 at 13:10

Set width of HTML UIWebView

3 Answers3