Method 1 (CSS scaling)
Make the webView fill the entire window of the application and support scaling from on the web side, with something like the
-webkit-transform: scale(1.2); CSS attribute applied to the main wrapper. However, this complicates the web code and requires it to know and monitor the dimensions of the webView. So, skip it for now.
Method 2 (using UIWebView’s
This is the most common answer to the question of scaling. To use it:
<meta name="viewport" content="width=600,user-scalable=no" />tag in the
<head>, where 600 is the nominal width of the web page.
self.webView.scalesPageToFit = YES;— enables the webView’s scaling.
The following code alters the webView’s frame every time the fullscreen mode changes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
This method seemed to be working well, until someone has noticed that the graphics (borders or something) was not rendered properly on retina screens. Interfering lines would appear out of blue. Thus, we had to try the next solution.
Method 3 (scaling the webView using its transform matrix)
Here I employed the
transform property, that is available in any UIView object, to apply the correct affine scale matrix. The steps:
<meta name="viewport" content="width=600,user-scalable=no" />tag.
self.webView.scalesPageToFit = YES;.
The resizing code looks like this now:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
It’s interesting that this method produces better scaled graphics rendering. I suppose this happens because here the iOS takes the original rendered view and scales it as is, whereas in the previous solution UIWebView could look into the page markup and zoom different elements in various ways.
Hope this information will help someone else. Stay tuned!