Screen sizes and break points for responsive design
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 width categories (also called "breakpoints"): small (640px and smaller), medium (641px to 1007px), and large (1008px and larger).
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.
|Window width breakpoints in effective pixels||640px or less||641px to 1007px||1008px or greater|
|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|
With Continuum for Phones, users can connect compatible Windows 10 mobile devices 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.
Effective pixels and scale factor
The scale factor determines the size of text and UI elements on the screen. Larger values increase the number of pixels the system uses to draw certain UI elements. Windows automatically selects a scale factor for each display based on its DPI (dots-per-inch) and the viewing distance of the device. Users can override the default value and by going to Settings > Display > Scale and layout settings page.