Tamaños de Viewport Android: Guía Completa
Esta guía completa proporciona tamaños de viewport y resoluciones de pantalla detallados para dispositivos Android populares. Información esencial para desarrolladores y diseñadores web que trabajan en sitios y aplicaciones responsive.
Tabla de Tamaños de Viewport
| Modelo | Tamaño de Viewport | Resolución de Pantalla | DPR | Año de Lanzamiento |
|---|---|---|---|---|
| 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 |
Entendiendo los Tamaños de Viewport
Fundamentos del Viewport
- Tamaño del Viewport: El área visible en píxeles CSS que tu sitio web puede usar
- Resolución de Pantalla: El número real de píxeles físicos en el dispositivo
- Relación de Píxeles del Dispositivo (DPR): La proporción entre píxeles físicos y píxeles CSS
- Orientación: Los dispositivos Android soportan tanto modo vertical como horizontal
Consideraciones de Diseño
- Diseña para varios tamaños de pantalla y densidades
- Considera diferentes relaciones de aspecto
- Optimiza para interacciones táctiles
- Usa media queries apropiadas
- Considera dispositivos plegables
Recursos Relacionados
Cargando...