[4/4 changed typo: 1080p -> 720p]
As I mentioned in my //Build talk, the emulator is not a good place to perform visual verification of assets because the display characteristics of your monitor are highly unlikely to match those of any physical devices. But it is an excellent tool for verifying the layout of your apps, and for comparing how the layout changes on the different-sized devices.
If you want the emulators to appear on your monitor in the same relative sizes as they would appear in real life, you should follow this set of zoom factors:
- Figure out maximum zoom for the 6" 1080p emulator that fits on your screen
- For the 5.5" 1080p emulator, multiple it by 0.92
- For the 4.7" 720p emulator, multiply it by 1.18
- For the 4.5" WXGA emulator, multiply it by 1.11 (it is mislabeled as 4" in the RC SDK)
- For the 4" WVGA emulator, multiply it by 1.57
So for example if you have a 1080p desktop monitor, these are the values you should use:
- 6" 1080p: 45%
- 5.5" 1080p: 41%
- 4.7" 720p: 50%
- 4.5" WXGA: 53%
- 4" WVGA: 71%
Those values will give you emulators that show content at the correct proportional size relative to each other. You might wonder why the numbers are so strange - for example, wouldn't the 4" phone just be 2/3rds the size of the 6" phone? - and the reason is that in addition to being different sizes, these devices all have different pixel densities. But your monitor has a fixed density and so we need to take that into account when calculating the sizes. Also there is a small adjustment for the 15:9 vs 16:9 aspect ratios.
You can verify that you have the right ratios setup by running the sample app from https://aka.ms/wpsllarge and going to the "size-aware page" and looking at the bottom image of the US 1 cent coin ("penny"). The bottom image will be the same physical size on all your emulators (but probably not the same size as a real penny... that only works if you run it on an actual device 🙂 ).