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"
                                   [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!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s