On my work, technology and related stuff....

Archive for August 2013 | Monthly archive page

1 comment

This post describes a way to scale the text content that is presented within a UIWebview of your iOS app. Often times, there is a need to zoom in or zoom out the text content presented within UIWebview container in response to user actions. •   Run a simple Javascript on the contents of the webview using the stringByEvaluatingJavaScriptFromString method in order to adjust the size of the text.
 

In the JS above, DEFAULTWEBVIEWFONTSIZE refers to the default font size of the text content presented within the web view and updatedFontSize refers to the desired font size. So for example, if DEFAULTWEBVIEWFONTSIZE is 18 and updatedFontSize is 9, then updatedFontSize*100/DEFAULTWEBVIEWFONTSIZE evaluates to 50.

 

•   Next step is to adjust the frame height of the web view so the scaled text content is visible. The simplest way to do this is to have the UIWebView as a subview of a scrollable view (UIScrollView or  its subclass ).  That way, you can adjust the web view frame height  and correspondingly, the content size of the scroll view that encompasses it. Adjusting the  web view height is a bit tricky as described below.

 

The sizeThatFits method on web view returns a size that best fits the content. The problem with this is that when you scale up, the method returns the updated size but if the web view is large enough to display the specified content, then scaling down will not update the frame size but instead, the current frame size is returned.

 

So first , reset the current frame height  of the web view to a small value like 1.

 

Now, obtain the frame size that would best fit the content. Since the current frame size is 1, we are scaling up. Update the frame size of the web view with the new frame size.

 

Finally, update the content size of the UIScrollView containing the web view to accommodate the scaled content.

 

You can download a sample project that scales the text content of web view from  here. Shown below are some screenshots of the app.