Best IT Recipes

HTML content matches UIWebview without scaling

I am using UIWebView to display some HTML. However, although the width of my web view is 320, my HTML is still displayed full-width and can be scrolled horizontally.

I want to achieve the same thing as for my own mail application, which is suitable for all content within this width without scaling - how does my own mail application render HTML in this way?

Update

I thought using the viewport meta tag would help, but I couldn't get this to work.

This is what happens:

enter image description here

As you can see, the content does not match the width of the device. I have tried so many combinations of the viewport meta tag. The following is an example of what happens when I try Martins' suggestion.

Original HTML code can be found here .

The way to display this HTML using your own email application is as follows .

+49
objective-c iphone uiwebview
May 19 '12 at 15:22
source share
6 answers

Here is what you do:

In your user interface controller that owns the web view, make it UIWebViewDelegate . Then, when you set the URL to load, set the delegate as the controller:

 NSString *urlAddress = @"http://dl.dropbox.com/u/50941418/2-build.html"; NSURL *url = [NSURL URLWithString:urlAddress]; NSURLRequest *requestObj = [NSURLRequest requestWithURL:url]; [webView loadRequest:requestObj]; webView.delegate = self;

And finally, return webViewDidFinishLoad: to set the zoom level correctly:

This option applies to iOS 5.0 and>

 - (void)webViewDidFinishLoad:(UIWebView *)theWebView { CGSize contentSize = theWebView.scrollView.contentSize; CGSize viewSize = theWebView.bounds.size; float rw = viewSize.width / contentSize.width; theWebView.scrollView.minimumZoomScale = rw; theWebView.scrollView.maximumZoomScale = rw; theWebView.scrollView.zoomScale = rw; }

Hope this helps ...

Option B, you can try changing the HTML (this example does the job, but it’s not ideal for parsing HTML. I just wanted to illustrate my point. It works for your example and probably in most cases. Box of 40, probably can be detected programmatically, I did not try to investigate it.

 NSString *urlAddress = @"http://dl.dropbox.com/u/50941418/2-build.html"; NSURL *url = [NSURL URLWithString:urlAddress]; NSString *html = [NSString stringWithContentsOfURL:url encoding:[NSString defaultCStringEncoding] error:nil]; NSRange range = [html rangeOfString:@"<body"]; if(range.location != NSNotFound) { // Adjust style for mobile float inset = 40; NSString *style = [NSString stringWithFormat:@"<style>div {max-width: %fpx;}</style>", self.view.bounds.size.width - inset]; html = [NSString stringWithFormat:@"%@%@%@", [html substringToIndex:range.location], style, [html substringFromIndex:range.location]]; } [webView loadHTMLString:html baseURL:url];
+127
May 22 '12 at 13:00
source share

Just add this:

 webView.scalesPageToFit = YES;
+56
Mar 06 '13 at 6:41
source share

Generally, you should use the viewport meta tag. But its use is very unstable, mainly if you need a cross-platform web page.

It also depends on what content and css you have.

For my iPhone homepage, which should automatically change from portrait to lanscape, I use this:

 <meta name="viewport" content="width=device-width; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no">

If you need a custom size, you can also use the event:

 <body onorientationchange="updateOrientation();">

with the appropriate functionality in your javascript:

 function updateOrientation() { if(Math.abs(window.orientation)==90) // landscape else // portrait }

EDIT:

Seeing the source of the page, it seems you did it with a web editor, right?

OK, I understand. Your main div is 600 pixels wide. Screen resolution iphone 320x480. 600> 320, so it exceeds the borders of the screen.

Now we will do some simple operations:

 320 / 600 = 0.53 480 / 600 = 0.8

Thus, you want to reduce the scale by 0.5 times and a maximum of 0.8 times. Allows you to change the viewport:

 <meta name="viewport" content="width=device-width; minimum-scale=0.5; maximum-scale=0.8; user-scalable=no">
+5
May 22 '12 at 9:50 a.m.
source share

What worked for me was to select the UIWebView in Interface Builder and check the “Scales Page To Fit” box:

enter image description here

+5
Nov 01 '13 at 21:20
source share
 @implementation UIWebView (Resize) - (void)sizeViewPortToFitWidth { [self stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.querySelector('meta[name=\"viewport\"]').setAttribute('content', 'width=%d;', false); ", (int)self.frame.size.width]]; } @end
+1
Jul 29 '15 at 13:45
source share

Swift 3:

Use this extension to resize web browser content based on the size of the web view.

 extension UIWebView { ///Method to fit content of webview inside webview according to different screen size func resizeWebContent() { let contentSize = self.scrollView.contentSize let viewSize = self.bounds.size let zoomScale = viewSize.width/contentSize.width self.scrollView.minimumZoomScale = zoomScale self.scrollView.maximumZoomScale = zoomScale self.scrollView.zoomScale = zoomScale } }

How to call?

 webViewOutlet.resizeWebContent()
+1
Nov 29 '16 at 10:40
source share


More articles:


All Articles