Apps need to be prepared for a variety of display sizes. For one, a user can switch view states at any time, putting the app into snapped view, filled view, and fullscreen landscape. The user can also rotate a device to switch to portrait automatically (on devices with appropriate sensors). These are the basics for a tablet device like a Surface.

But also remember that as WIndows 8 runs on many different kinds of devices, there are many other ways that display properties can be changed.

For example, think of everything that can happen through the Display settings in Control Panel. The user can rotate a display directly (as when using a desktop monitor that swivels), which will change a view state to fullscreen portrait as well. The user can change display resolution, which clearly changes the size of fullscreen and filled views, as well as the vertical dimension of a snapped view.

On multi-monitor systems, the user can also change which monitor is assigned to run Windows Store apps, which potentially has the same effect as changing display resolution if those monitors are different.

A user could also plug an external display into a device: monitors, projectors, and so forth. Depending on how the user configures that display–duplicating the main device, extending the display, or switching exclusively to the external display–the screen resolution can change as well as the pixel density. For example, a Surface Pro has a 1920×1080 screen that puts the 140% scaling into effect because it’s only a 10.6″ screen. But plug it into a monitor with the same resolution and the scaling can revert to 100%. (This means that the app will see an effective resolution change from approxmately 1366×768 to 1920×1080.)

The bottom line is that apps really need to watch for the relevant resize event (such as window.resize in JavaScript) and update their layout both for window/screen dimensions and pixel density–and don’t overlook the non-obvious cases when running some tests. It’s good to try all the things described here.

Beyond this, two other software features could be cause for resizing the app: app bars and the soft keyboard. By default, these appear as overlays on the app’s canvas, and with the keyboard Windows will also pan the app up automatically to make room. If you want more sophsiticated behavior, though, you can handle the events when these become visible and update your layout more precisely.

Comments are closed