Window size classes are not intended for isTablet-type logic. Note: Most apps can build a responsive UI by considering only the width window size class.Īlthough it can be useful to visualize size classes as physical devices, window size classes are explicitly not determined by the size of the device screen. Large unfolded inner displays in landscape Large unfolded inner displays in portrait Each size class breakpoint represents a majority case for typical device scenarios, which can be a helpful frame of reference as you think about the design of your breakpoint-based layouts. Representations of height-based window size classes.Īs visualized above, the breakpoints allow you to continue thinking about layouts in terms of devices and configurations. Representations of width-based window size classes.įigure 2. Available width is usually more important than available height due to the ubiquity of vertical scrolling, so the width window size class will likely be more relevant to your app’s UI. Available width and height are classified separately, so at any point in time, your app has two window size classes-one for width, one for height. Window size classes categorize the display area available to your app as compact, medium, or expanded. The breakpoints have been chosen specifically to balance layout simplicity with the flexibility to optimize your app for unique cases.
Window size classes are a set of opinionated viewport breakpoints that help you design, develop, and test responsive and adaptive application layouts. Responsive/adaptive layouts provide an optimized user experience regardless of screen size, enabling your app to accommodate phones, tablets, foldable and ChromeOS devices, portrait and landscape orientations, and resizable configurations such as multi-window mode.
To support as many screen sizes as possible, design your app layouts to be responsive and adaptive. Support for different screen sizes enables the greatest number of users and widest variety of devices to access your app.
0 kommentar(er)
