Android Viewport Sizes: Complete Guide
This comprehensive guide provides detailed viewport sizes and screen resolutions for popular Android devices. Essential information for web developers and designers working on responsive websites and applications.
Viewport Sizes Table
| Model | Viewport Size | Screen Resolution | DPR | Release Year |
|---|---|---|---|---|
| Samsung Galaxy S24 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2024 |
| Samsung Galaxy S24+ | 384 × 854 | 1344 × 2992 | 3.5 | 2024 |
| Samsung Galaxy S24 | 360 × 780 | 1080 × 2340 | 3.0 | 2024 |
| Google Pixel 8 Pro | 412 × 892 | 1344 × 2992 | 3.25 | 2023 |
| Google Pixel 8 | 412 × 915 | 1080 × 2400 | 2.6 | 2023 |
| Samsung Galaxy S23 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2023 |
| Samsung Galaxy S23+ | 384 × 854 | 1080 × 2340 | 2.8 | 2023 |
| Samsung Galaxy S23 | 360 × 780 | 1080 × 2340 | 3.0 | 2023 |
| Samsung Galaxy Z Fold 5 | 384 × 832 | 1812 × 2176 | 3.0 | 2023 |
| Samsung Galaxy Z Flip 5 | 412 × 915 | 1080 × 2640 | 2.6 | 2023 |
| Google Pixel 7 Pro | 412 × 892 | 1440 × 3120 | 3.5 | 2022 |
| Google Pixel 7 | 412 × 915 | 1080 × 2400 | 2.6 | 2022 |
| Samsung Galaxy S22 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2022 |
| Samsung Galaxy S22+ | 384 × 854 | 1080 × 2340 | 2.8 | 2022 |
| Samsung Galaxy S22 | 360 × 780 | 1080 × 2340 | 3.0 | 2022 |
| OnePlus 10 Pro | 412 × 919 | 1440 × 3216 | 3.5 | 2022 |
| Google Pixel 6 Pro | 412 × 892 | 1440 × 3120 | 3.5 | 2021 |
| Google Pixel 6 | 412 × 915 | 1080 × 2400 | 2.6 | 2021 |
| Samsung Galaxy S21 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2021 |
| Samsung Galaxy S21+ | 384 × 854 | 1080 × 2400 | 2.8 | 2021 |
| Samsung Galaxy S21 | 360 × 800 | 1080 × 2400 | 3.0 | 2021 |
| OnePlus 9 Pro | 412 × 919 | 1440 × 3216 | 3.5 | 2021 |
| OnePlus 9 | 412 × 915 | 1080 × 2400 | 2.6 | 2021 |
| Xiaomi Mi 11 | 360 × 800 | 1440 × 3200 | 4.0 | 2021 |
| Samsung Galaxy S20 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2020 |
| Samsung Galaxy S20+ | 384 × 854 | 1440 × 3200 | 3.75 | 2020 |
| Samsung Galaxy S20 | 360 × 800 | 1440 × 3200 | 4.0 | 2020 |
| Google Pixel 5 | 393 × 851 | 1080 × 2340 | 2.75 | 2020 |
| Google Pixel 4 XL | 412 × 869 | 1440 × 3040 | 3.5 | 2019 |
| Google Pixel 4 | 393 × 830 | 1080 × 2280 | 2.75 | 2019 |
| OnePlus 8 Pro | 412 × 919 | 1440 × 3168 | 3.5 | 2020 |
| Samsung Galaxy Note 20 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2020 |
| Samsung Galaxy S10+ | 412 × 869 | 1440 × 3040 | 3.5 | 2019 |
| Samsung Galaxy S10 | 360 × 760 | 1440 × 3040 | 4.0 | 2019 |
| Samsung Galaxy S10e | 360 × 760 | 1080 × 2280 | 3.0 | 2019 |
Understanding Viewport Sizes
Viewport Basics
- Viewport Size: The visible area in CSS pixels that your website can use
- Screen Resolution: The actual number of physical pixels on the device
- Device Pixel Ratio (DPR): The ratio between physical pixels and CSS pixels
- Orientation: Android devices support both portrait and landscape modes
Design Considerations
- Design for various screen sizes and densities
- Consider different aspect ratios
- Optimize for touch interactions
- Use appropriate media queries
- Consider foldable devices