Using PixelScale and ScaleFactor for selective zooming

[JonathanLynch]

Hi everyone,

I made an application for work that uses the pixelscale property in iOS to zoom into the content, while not zooming into the various buttons that the user needs to control the application.

I know this has been a topic of discussion in the past, so I thought I would share how I did it. The application on iTunes is called Ready Wrigley Activities. I did an okay job with the app, but it isn't perfect. Still, the zoom method works well.

It turns out that mobile browser windows do not zoom along with the main content. So, I created a ring of controls around the main window using 4 different html windows. I used browserloadrequest in iOS and BrowserBeforeNavigate for windows and Mac to intercept the messages from the html-based controls. It is also possible to do something like this in Android, but it is a bit convoluted.

In order to have stable zooming, without too much distortion, it helps if the zoom levels are always a power of 2. So, setting the pixelscale or scalefactor to 2 is a way zooming in, and setting it to .5 is a way to zoom out. iOS does not work well when the pixelscale goes above 2, which can be a problem on a hi-res display that uses a pixelscale of 2 as the standard setting. To overcome this, I made the content twice as large as needed. On an iPad with retina display, it views as normal by setting the pixelscale down to 1, zoomed in when the pixelscale is 2 and zoomed out when the pixelscale is .5.

The method of doubling and halving the scale is useful on desktop versions as well. If you reset the height and width of your stack after setting the scalefactor, you can make it stay in one place. The first couple of zooms, the stack will shift around by a pixel or 2, but then will settle into one place where it zooms in and out while staying stable. This seems to work with setting the scale factor to powers of 2. There might be other numerical sequences that let it look stable, but I have not experimented with them.

So, in short, we can combine embedded html windows with the pixelscale and scalefactor to have an app that has controls that remain stable while zooming in and out of content.