UIWebViews and Orientation Changes

UIWebViews and Orientation Changes

One of the pesky problems in iOS development is how to float text with hyperlinks. Really and truly, the only bullet-proof way to do this is to use UIWebView.

But it comes with its own set of unique problems, not the least of which are:

1) Setting font size and color, and
2) Keeping the web view from resizing everything when you change device orientation.

The following code snippet shows how to solve both issues. We simply inject some CSS into the web view… and voila! Issues solved.

        NSString *myDescriptionHTML = [NSString stringWithFormat:@"<html> \n"
                                   "<head> \n"
                                   "<style type=\"text/css\"> \n"
                                   "body {font-family: \"%@\"; font-size: %@; 
                                    color: #444444; -webkit-text-size-adjust: none;}\n"
                                   "</style> \n"
                                   "</head> \n"
                                   "<body>%@</body> \n"
                                   "</html>", 
                                   @"helvetica", 
                                   [NSNumber numberWithInt:14], _myText];    
    
    [_bodyText loadHTMLString:myDescriptionHTML baseURL:[NSURL URLWithString:@""]];

The key css styling that will keep the UIWebView from resizing text on orientation changes is

-webkit-text-size-adjust: none;

The rest is self explanatory.

Happy Coding!

How to Detect the Height of a UIWebView

How to Detect the Height of a UIWebView

UIWebView

A nifty solution from Stack Overflow.

Here’s my particular implementation, where I simply measure the height of the document.body element:


    NSString *output = [myWebView 
                        stringByEvaluatingJavaScriptFromString:
                        @"document.body.offsetHeight;"];
    NSLog(@"height: %d", [output intValue]);

Stop the Bouncy UIWebViews!

Stop the Bouncy UIWebViews!

If you’ve ever used UIWebView inside of any iPhone app, one of the more unique – and some would say, annoying – behaviors of the embedded web view is that it “bounces” when pulled down, exposing a gray background and letting your users know that “hey – this guy is using a web view!

There is an answer to the “bouncy” web view problem. Actually, there are two (2) answers to the “bouncy” web view problem. Since one uses an undocumented call and will therefore get your app “bounced” from the App Store (sorry for the bad pun), I won’t include it here.

The answer that ** won’t ** get your app declined but ** will ** stop the bouncing may be found below:

// Stop the bounces
UIScrollView* sv = nil;
for(UIView* v in myWebView.subviews){
  if([v isKindOfClass:[UIScrollView class] ]){
    sv = (UIScrollView*) v;
    sv.scrollEnabled = YES;
    sv.bounces = NO;
    }
  }

This will still allow your web view to scroll, but won’t “bounce” when you try to pull the view up or down outside of its given bounds. If you also want to stop scrolling, simply change the sv.scrollEnabled line to NO.