Search code examples
iosuiwebviewretina-display

iOS webview scaling to match retina display


I'm using a full screen UIWebView to house/render an HTML5 application under iOS. Very much like Cordova/phonegap although I'm not using those. I try to make my webview size match the underlying display. Unfortunately, on retina displays, the value returned by self.view.bounds relies on the UIScreen scaling factor. So I get 1024x768 instead of 2048x1536. Not a huge problem except I then instantiate the UIWebView using the smaller bounds (after adjusting for the status bar) and some things get a bit jaggy. In particular, I use canvas at a couple of points and also rounded borders appear thick. To be clear, this isn't a case of scaled raster resources.

I'm not getting the full resolution of the screen using that UIWebView. Ideally, I'd like to set the screen scale to 1.0 but that doesn't appear to be supported. Any suggestions on how best to get full advantage of the screen?

The problem is most noticeable on the iPhone 5 simulator. I don't have that hardware to test on. iPad/new iPad I think has the problem but the jaggies aren't as noticeable.

Update: The more I look at this, the more I think it may be restricted to canvas.

Solution: In case anyone else gets here. Based on the answer below, I created all of my canvas elements with width and height multiplied by window.devicePixelRatio and then set their style attribute to have the original (device independent) size.


Solution

  • See https://stackoverflow.com/a/7736803/341994. Basically you need to detect that you've got double resolution and effectively double the resolution of the canvas.