मौजूदा iPhone की स्क्रीन 6.1 से 6.9 इंच की है, और CSS viewport की चौड़ाई 390 से 440 पिक्सेल तक। iPhone 18 Pro और iPhone 17 में 6.3 इंच की स्क्रीन और 402 × 874 का viewport है; iPhone 18 Pro Max और 17 Pro Max में 6.9 इंच की स्क्रीन और 440 × 956 का viewport; iPhone 17e में 6.1 इंच की स्क्रीन और 390 × 844 का viewport। नीचे के चार्ट में पहले iPhone SE तक हर मॉडल है।
चार्ट कैसे पढ़ें
- स्क्रीन साइज़ इंच में डायगोनल है, जैसा Apple बताता है। गोल कोनों वाले मॉडल में असल में दिखने वाला हिस्सा थोड़ा छोटा होता है।
- Resolution डिस्प्ले के असली पिक्सेल की गिनती है, portrait में।
- CSS viewport वह है जो सही viewport meta tag होने पर portrait में Safari के अंदर वेब पेज को दिखता है: resolution को pixel ratio से भाग देने पर। रिस्पॉन्सिव डिज़ाइन और media queries के लिए यही संख्या इस्तेमाल करें।
- Pixel ratio (DPR) बताता है कि हर दिशा में एक CSS पिक्सेल कितने असली पिक्सेल से बनता है।
iPhone screen size चार्ट (2016–2026)
| मॉडल | साल | स्क्रीन | Resolution | CSS viewport | Pixel ratio |
|---|---|---|---|---|---|
| iPhone 18 Pro Max | 2026 | 6.9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 18 Pro | 2026 | 6.3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 17e | 2026 | 6.1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 17 Pro Max | 2025 | 6.9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 17 Pro | 2025 | 6.3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone Air | 2025 | 6.5” | 1260 × 2736 | 420 × 912 | 3 |
| iPhone 17 | 2025 | 6.3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16e | 2025 | 6.1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 16 Pro Max | 2024 | 6.9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 16 Pro | 2024 | 6.3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16 Plus | 2024 | 6.7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 16 | 2024 | 6.1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Pro Max | 2023 | 6.7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 Pro | 2023 | 6.1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Plus | 2023 | 6.7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 | 2023 | 6.1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Pro Max | 2022 | 6.7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 14 Pro | 2022 | 6.1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Plus | 2022 | 6.7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 14 | 2022 | 6.1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone SE (3rd gen) | 2022 | 4.7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 13 Pro Max | 2021 | 6.7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 13 / 13 Pro | 2021 | 6.1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 13 mini | 2021 | 5.4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone 12 Pro Max | 2020 | 6.7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 12 / 12 Pro | 2020 | 6.1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 12 mini | 2020 | 5.4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone SE (2nd gen) | 2020 | 4.7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 11 Pro Max | 2019 | 6.5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone 11 Pro | 2019 | 5.8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 11 | 2019 | 6.1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone XS Max | 2018 | 6.5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone XS | 2018 | 5.8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone XR | 2018 | 6.1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone X | 2017 | 5.8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 8 Plus | 2017 | 5.5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 8 | 2017 | 4.7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 7 Plus | 2016 | 5.5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 7 | 2016 | 4.7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone SE (1st gen) | 2016 | 4.0” | 640 × 1136 | 320 × 568 | 2 |
* Plus मॉडल 1242 × 2208 पर render करते हैं और फिर उसे 1080 × 1920 के पैनल पर छोटा करते हैं, इसलिए बताया जाने वाला pixel ratio 3 है, जबकि असली ratio लगभग 2.6 है। iPhone 12 mini और 13 mini भी इसी तरह 375 px चौड़ा viewport ऐसे पैनल पर दिखाते हैं जो 3x के लिए ज़रूरी साइज़ से थोड़ा छोटा है।
स्रोत: हर मॉडल के लिए Apple के technical specifications पेज (स्क्रीन साइज़ और resolution); viewport की वैल्यू resolution को pixel ratio से भाग देकर निकाली गई हैं। सबसे नए मॉडल के लिए Apple का specs पेज देखें, क्योंकि Apple हर साल नए मॉडल जोड़ता है।
वेब डिज़ाइनरों को असल में कौन-सी viewport चौड़ाई चाहिए
इतने सारे मॉडल में से लेआउट के लिए सिर्फ़ कुछ ही चौड़ाइयाँ मायने रखती हैं:
| CSS चौड़ाई | मॉडल |
|---|---|
| 375 px | SE (2nd और 3rd gen), 8, mini मॉडल, X/XS/11 Pro |
| 390 px | 12, 13, 14, 16e, 17e |
| 393 px | 14 Pro, 15, 15 Pro, 16 |
| 402 px | 16 Pro, 17, 17 Pro, 18 Pro |
| 414 px | XR, 11, XS Max, 11 Pro Max, 8 Plus |
| 420 px | Air |
| 428–440 px | Plus और Pro Max मॉडल |
अगर आपका लेआउट 375 से 440 px तक बिना रुकावट ढलता है, तो वह पिछले आठ साल में बिके हर iPhone पर काम करता है। पुराने डिवाइस और ज़ूम किए गए टेक्स्ट के लिए सुरक्षित रहना है, तो 320 px भी टेस्ट करें। फ़ोन के बीच और उनसे आगे की चौड़ाइयों के लिए रिस्पॉन्सिव breakpoints देखें।
किस iPhone की स्क्रीन सबसे बड़ी और सबसे छोटी है?
सबसे बड़ी iPhone स्क्रीन 6.9 इंच वाले Pro Max मॉडल की है: iPhone 16 Pro Max, 17 Pro Max और 18 Pro Max। मौजूदा पीढ़ी में सबसे छोटी स्क्रीन 6.1 इंच की है (iPhone 16e और 17e)। आधुनिक किनारे-से-किनारे डिज़ाइन वाला सबसे छोटा iPhone 5.4 इंच का iPhone 13 mini था, और इस चार्ट में कुल मिलाकर सबसे छोटा 4 इंच का पहला iPhone SE है।
इन साइज़ से वेबसाइट टेस्ट करना
डेस्कटॉप पर अपनी साइट को ठीक iPhone के साइज़ में देखने के लिए सिर्फ़ पतली विंडो नहीं, बल्कि viewport और pixel ratio व user agent भी चाहिए। दो विकल्प:
- Chrome DevTools का device mode: कोई iPhone प्रीसेट चुनें, या Edit पर क्लिक करके चार्ट से चौड़ाई, ऊँचाई और pixel ratio लेकर custom device जोड़ें। देखें Chrome मोबाइल एमुलेटर गाइड।
- iPhone प्रीसेट वाला मोबाइल व्यू एक्सटेंशन। Mobile View Extension टैब को iPhone के फ़्रेम में मेल खाते user agent, स्क्रीन साइज़ और pixel ratio के साथ रीलोड करता है, और कोई मॉडल न हो तो अपना resolution भी डाल सकते हैं।
दोनों Chrome के इंजन से render करते हैं। Safari के ख़ास व्यवहार के लिए Xcode Simulator या असली iPhone इस्तेमाल करें, जिसके बारे में बिना iPhone के वेबसाइट को iPhone पर कैसे टेस्ट करें में लिखा है।
अक्सर पूछे जाने वाले सवाल
iPhone 17 का viewport साइज़ क्या है?
pixel ratio 3 पर 402 × 874 CSS पिक्सेल, 1206 × 2622 पिक्सेल वाले 6.3 इंच के डिस्प्ले से। iPhone 17 Pro और iPhone 18 Pro की वैल्यू भी यही है।
iPhone के लिए किस स्क्रीन साइज़ पर डिज़ाइन करें?
ऐसे फ़्लूइड लेआउट बनाएँ जो 375 से 440 px चौड़ाई तक काम करें। मॉकअप में मध्यम साइज़ के आम iPhone के रूप में 390 या 393 px लें, और रिलीज़ से पहले 375 और 440 px जाँच लें।
iPhone का viewport उसके resolution से छोटा क्यों है?
टेक्स्ट साफ़ दिखे, इसलिए हर CSS पिक्सेल हर तरफ़ दो या तीन असली पिक्सेल से बनाया जाता है। viewport, resolution को इसी pixel ratio से भाग देने पर मिलता है। ज़्यादा जानकारी viewport size क्या है में।