مرجع أحجام شاشات الجوال
مرجع 2025–2026 لأحجام شاشات iPhone 17 وGalaxy S25 وPixel 9a.
| Device | Width (px) | Height (px) | PPI | Scale | Year |
|---|---|---|---|---|---|
| iPhone 17 Pro Max(6.9" ProMotion) | 1320 | 2868 | 460 | 3x | 2025 |
| iPhone 17 Pro(6.3" ProMotion) | 1206 | 2622 | 460 | 3x | 2025 |
| iPhone 17 Air(6.6" ultra-thin 5.5 mm) | 1290 | 2796 | 466 | 3x | 2025 |
| iPhone 17(6.1" ProMotion) | 1179 | 2556 | 460 | 3x | 2025 |
| iPhone 16e(6.1" — replaces SE line) | 1179 | 2556 | 460 | 3x | 2025 |
| iPhone 16 Pro Max(6.9") | 1320 | 2868 | 460 | 3x | 2024 |
| iPhone 16 Pro(6.3") | 1206 | 2622 | 460 | 3x | 2024 |
| iPhone 16 Plus(6.7") | 1290 | 2796 | 460 | 3x | 2024 |
| iPhone 16(6.1") | 1179 | 2556 | 460 | 3x | 2024 |
| iPhone 15 Pro Max | 1290 | 2796 | 460 | 3x | 2023 |
| iPhone 15 Pro | 1179 | 2556 | 460 | 3x | 2023 |
| iPhone 15 Plus | 1290 | 2796 | 460 | 3x | 2023 |
| iPhone 15 | 1179 | 2556 | 460 | 3x | 2023 |
| iPhone 14 Pro Max | 1290 | 2796 | 460 | 3x | 2022 |
| iPhone 14 | 1170 | 2532 | 460 | 3x | 2022 |
| iPhone SE (3rd)(4.7") | 750 | 1334 | 326 | 2x | 2022 |
| iPhone 13 mini | 1080 | 2340 | 476 | 3x | 2021 |
| iPhone 12 | 1170 | 2532 | 460 | 3x | 2020 |
| iPhone 11 | 828 | 1792 | 326 | 2x | 2019 |
| Samsung Galaxy S25 Ultra(6.9" QHD+) | 1440 | 3120 | 501 | 4x | 2025 |
| Samsung Galaxy S25 Edge(6.7" ultra-thin) | 1080 | 2340 | 396 | 3x | 2025 |
| Samsung Galaxy S25+(6.7") | 1080 | 2340 | 388 | 3x | 2025 |
| Samsung Galaxy S25(6.2") | 1080 | 2340 | 416 | 3x | 2025 |
| Google Pixel 9a(6.3") | 1080 | 2424 | 422 | 3x | 2025 |
| Samsung Galaxy S24 Ultra | 1440 | 3088 | 505 | 4x | 2024 |
| Samsung Galaxy S24 | 1080 | 2340 | 416 | 3x | 2024 |
| Google Pixel 9 Pro | 1344 | 2992 | 486 | 3.5x | 2024 |
| Google Pixel 9 | 1080 | 2424 | 422 | 3x | 2024 |
| Samsung Galaxy A55 | 1080 | 2340 | 403 | 3x | 2024 |
| OnePlus 12 | 1440 | 3168 | 510 | 4x | 2024 |
| Xiaomi 14 | 1200 | 2670 | 460 | 3x | 2024 |
| Google Pixel 8a | 1080 | 2400 | 429 | 3x | 2024 |
| iPad mini 7 (M3)(8.3") | 1488 | 2266 | 326 | 2x | 2024 |
| iPad Pro 13" (M4) | 2064 | 2752 | 264 | 2x | 2024 |
| iPad Pro 11" (M4) | 1668 | 2420 | 264 | 2x | 2024 |
| iPad Air 13" (M2) | 2064 | 2752 | 264 | 2x | 2024 |
| iPad Air 11" (M2) | 1640 | 2360 | 264 | 2x | 2024 |
| iPad (10th gen) | 1640 | 2360 | 264 | 2x | 2022 |
| Samsung Galaxy Tab S10 Ultra(14.6") | 1848 | 2960 | 240 | 2x | 2024 |
| Samsung Galaxy Tab S10+(12.4") | 1752 | 2800 | 266 | 2x | 2024 |
| Samsung Galaxy Tab S9 | 1600 | 2560 | 274 | 2x | 2023 |
41 devices · Click any row for details. Logical = CSS pixels used in media queries.
ما هو مرجع أحجام الشاشات؟
دليل شامل لأحجام شاشات الهواتف اللوحية وأجهزة Apple وAndroid وWindows. أساسي لمصممي UI، مطوري الويب، ضمان أن تطبيقك يعمل على كل الأجهزة. يشمل CSS pixels، physical pixels، resolution، pixel density.
أجهزة شائعة 2026
- iPhone 15 Pro Max: 430×932 (CSS)
- iPhone 15: 393×852
- Galaxy S24 Ultra: 412×912
- Pixel 8 Pro: 412×892
- iPad Pro 12.9: 1024×1366
Breakpoints موصى بها
- Mobile: <640px
- Tablet: 640-1024
- Laptop: 1024-1440
- Desktop: >1440
- Ultra-wide: >1920
Mobile-first design
ابدأ من أصغر شاشة، أضف ميزات للأكبر. استخدم relative units (rem، %)، ليس px. flexbox/grid للـ layout المرن. responsive images (srcset). اختبر على Chrome DevTools device mode، iOS Safari فعلياً، Samsung Browser. lighthouse score 90+ للموبايل ضروري للـ SEO الحديث.
الأسئلة الشائعة
- ما أحجام شاشات الموبايل الحديثة؟
- iPhone 15 Pro Max: 430×932 (logical)، 1290×2796 (physical). iPhone 15: 393×852. Samsung Galaxy S24 Ultra: 412×912. Pixel 8 Pro: 412×892. تطبيقات تصمم للـ logical pixels، الصور تحتاج physical (3x retina).
- ما الفرق بين logical وphysical؟
- Logical (CSS pixels): ما تستخدمه في CSS. Physical: البكسل الحقيقي للشاشة. iPhone 15 = 393×852 logical لكن 1179×2556 physical (3x ratio). للصور، تحتاج 2x أو 3x للوضوح على Retina. CSS تتعامل مع التحويل تلقائياً.
- ما الـ breakpoints الموصى بها؟
- Mobile: <640px. Tablet: 640-1024. Laptop: 1024-1440. Desktop: >1440. Tailwind/Bootstrap يستخدمون مماثل. تجنب breakpoints بناءً على أجهزة محددة (iPhone X) - استخدم قيم منطقية. اختبر على devices حقيقية.
- كيف أصمم لكل الأجهزة؟
- Mobile-first design - ابدأ بأصغر شاشة. استخدم relative units (rem، %)، ليس px. flexbox/grid للـ layout المرن. responsive images (srcset). اختبر على Chrome DevTools device mode، iOS Safari (فعلياً). تجنب fixed widths مطلقاً.