Foundations
Under Development
This page is currently being updated. Some information may be incomplete or subject to change.
Screen sizes
Web
For web design, it is important to consider various screen sizes to ensure a responsive layout.
| Device Type | Width (px) |
|---|---|
| Small devices (mobile) | 320 - 480 |
| Medium devices (tablets) | 481 - 768 |
| Large devices (desktops) | 769 - 1024 |
| Extra large devices (large desktops) | 1025 and up |
Android
Android devices come in a variety of screen sizes and densities. Use dp (density-independent pixels) for defining dimensions and sp (scale-independent pixels) for text sizes to ensure consistency across different screens.
| Size Category | Dimensions (dp) |
|---|---|
| Small | 320 x 426 |
| Normal | 360 x 640 |
| Large | 480 x 800 |
| X-Large | 720 x 1280 |
iOS
iOS devices also come in a range of sizes. Apple's Human Interface Guidelines provide detailed information on designing for different iOS devices.
| Size Category | Dimensions (pt) |
|---|---|
| Small | 320 x 568 |
| Phone | 375 x 812 |
| Tablet | 768 x 1024 |