The number of device targets and screen sizes across the Windows 10 ecosystem is too great to worry about optimizing your UI for each one. Instead, we recommended designing for a few key widths (also called "breakpoints"): 360, 640, 1024 and 1366 epx.
When designing for specific breakpoints, design for the amount of screen space available to your app (the app's window). When the app is running full-screen, the app window is the same size as the screen, but in other cases, it's smaller.
This table describes the different size classes and provides general recommendations for tailoring for those size classes.
|Typical screen size (diagonal)||4" to 6"||7" to 12", or TVs||13" and larger|
|Typical devices||Phones||Phablets, tablets, TVs||PCs, laptops, Surface Hubs|
|Common window sizes in effective pixels||320x569, 360x640, 480x854||960x540, 1024x640||1366x768, 1920x1080|
|Window width breakpoints in effective pixels||640px or less||641px to 1007px||1008px or greater|
With Continuum for Phones, a new experience for compatible Windows 10 mobile devices, users can connect their phones to a monitor, mouse and keyboard to make their phones work like laptops. Keep this new capability in mind when designing for specific breakpoints - a mobile phone will not always stay in the small size class.