Chrome में वेबसाइट को iPad की तरह देखने के लिए DevTools खोलें, device toolbar चालू करें (Ctrl + Shift + M, या Mac पर Cmd + Shift + M), और Dimensions लिस्ट से कोई iPad चुनें या 820 × 1180 जैसा टैबलेट साइज़ टाइप करें। टैबलेट प्रीसेट वाला मोबाइल व्यू एक्सटेंशन यही काम टूलबार के एक बटन से करता है। लेकिन जो दिखे उस पर भरोसा करने से पहले नीचे iPad Safari वाला हिस्सा पढ़ लें: असली iPad अक्सर साइट का डेस्कटॉप वर्शन लोड करते हैं।
टैबलेट टेस्टिंग में ग़लती करना आसान क्यों है
रिस्पॉन्सिव डिज़ाइन में टैबलेट एक अटपटी बीच वाली जगह पर हैं। उनकी portrait चौड़ाई (मौजूदा iPad में लगभग 744 से 1032 CSS पिक्सेल) ठीक सबसे आम breakpoints, 768 px और 1024 px, पर पड़ती है। टैबलेट घुमाते ही लेआउट “फ़ोन” और “डेस्कटॉप” के बीच बदल सकता है, और sticky हेडर, साइड मेन्यू और कई कॉलम वाले grid अक्सर ठीक यहीं टूटते हैं।
एक दूसरा जाल भी है, जिसका चौड़ाई से कोई लेना-देना नहीं।
iPad Safari डिफ़ॉल्ट रूप से डेस्कटॉप साइट माँगता है
iPadOS 13 से iPad पर Safari डिफ़ॉल्ट रूप से वेबसाइटों का डेस्कटॉप वर्शन माँगता है। वह ऐसा user agent भेजता है जो iPad का नहीं, Mac पर Safari जैसा दिखता है। इसका मतलब:
- जो सर्वर user agent से मोबाइल डिवाइस पहचानता है, वह iPad को डेस्कटॉप कंप्यूटर मानेगा
- आपकी CSS फिर भी असली viewport की चौड़ाई के हिसाब से चलती है, इसलिए media queries उम्मीद के मुताबिक़ काम करती हैं
- इनपुट फिर भी सिर्फ़ touch है, भले साइट को लगे कि वह Mac से बात कर रही है
इसलिए जब आप Chrome में “iPad” user agent के साथ iPad एमुलेट करते हैं, तो आपको साइट का ऐसा वर्शन दिख सकता है जो असली iPad यूज़र्स को कभी मिलता ही नहीं। ईमानदार टेस्ट के लिए दोनों जाँचें: iPad viewport के साथ मोबाइल/iPad user agent, और उसी viewport के साथ डेस्कटॉप user agent। DevTools में More tools > Network conditions में user agent बदल सकते हैं; स्टेप Chrome में user agent कैसे बदलें में हैं।
तरीका 1: DevTools का device mode
- DevTools खोलें और device toolbar चालू करें।
- Dimensions मेन्यू में अगर iPad मॉडल हो तो उसे चुनें। न हो तो Edit पर क्लिक करके और डिवाइस चालू करें, या Responsive चुनकर साइज़ टाइप करें।
- landscape टेस्ट करने के लिए घुमाने वाले आइकन से घुमाएँ।
- पेज रीलोड करें।
device mode touch events भी एमुलेट करता है, जो टैप से खुलने वाले टैबलेट मेन्यू टेस्ट करने में मदद करता है। ज़्यादा जानकारी Chrome मोबाइल एमुलेटर गाइड में है।
तरीका 2: टैबलेट प्रीसेट वाला मोबाइल व्यू एक्सटेंशन
अगर आप अक्सर टैबलेट लेआउट जाँचते हैं, तो एक्सटेंशन तेज़ है। Mobile View Extension में फ़ोन के साथ टैबलेट प्रीसेट भी हैं, portrait और landscape दोनों सपोर्ट हैं, और अगर आपका डिवाइस लिस्ट में नहीं है तो आप अपना resolution डाल सकते हैं। यह टैब को मेल खाते user agent और स्क्रीन साइज़ के साथ रीलोड करता है और पेज बदलने पर भी वही व्यू रखता है। ब्राउज़र के अंदर चलने वाले हर प्रीव्यू की तरह, इसमें touch नहीं, माउस इनपुट होता है।
तरीका 3: असली iPad Safari के लिए Xcode Simulator
Mac पर Xcode Simulator असली iPadOS और Safari चलाता है। यह ऊपर बताया गया डेस्कटॉप साइट वाला व्यवहार, Safari की अपनी rendering और ऑन-स्क्रीन कीबोर्ड दिखाता है। यह मुफ़्त है, लेकिन बड़ा है, और सिर्फ़ macOS पर चलता है। देखें बिना iPhone के वेबसाइट को iPhone पर कैसे टेस्ट करें; iPad के लिए स्टेप वही हैं।
मौजूदा iPad के viewport साइज़
ये portrait में CSS viewport साइज़ हैं, Apple के बताए स्क्रीन resolution को device pixel ratio 2 से भाग देकर निकाले गए।
| iPad मॉडल | स्क्रीन | असली resolution | CSS viewport (portrait) |
|---|---|---|---|
| iPad mini (6th और 7th generation) | 8.3” | 1488 × 2266 | 744 × 1133 |
| iPad (10th generation और A16) | 10.9–11” | 1640 × 2360 | 820 × 1180 |
| iPad Air 11-inch (M2 और बाद के) | 11” | 1640 × 2360 | 820 × 1180 |
| iPad Air 13-inch (M2 और बाद के) | 13” | 2048 × 2732 | 1024 × 1366 |
| iPad Pro 11-inch (M4 और बाद के) | 11” | 1668 × 2420 | 834 × 1210 |
| iPad Pro 13-inch (M4 और बाद के) | 13” | 2064 × 2752 | 1032 × 1376 |
जिस मॉडल को आप टारगेट कर रहे हैं, उसके लिए Apple का technical specifications पेज देखें, क्योंकि Apple iPad अक्सर अपडेट करता है।
Android टैबलेट में कहीं ज़्यादा विविधता है। टेस्टिंग के लिए काम का सेट है 800 × 1280, 600 × 960 (7–8 इंच के छोटे टैबलेट) और 1280 × 800 जैसा चौड़ा landscape साइज़।
टैबलेट साइज़ पर क्या जाँचें
- नेविगेशन। क्या मेन्यू hamburger से पूरी पट्टी में उसी चौड़ाई पर बदलता है जहाँ पूरी पट्टी सच में समाती है?
- Grids। क्या तीन कॉलम वाले कार्ड grid, अकेले छूटे आइटम के साथ, ठसाठस दो कॉलम में बदल जाते हैं?
- सिर्फ़ hover वाले इंटरैक्शन। hover पर खुलने वाले ड्रॉपडाउन touch स्क्रीन पर कुछ नहीं करते। पक्का करें कि वे टैप पर भी खुलें।
- Landscape। घुमाकर दोबारा जाँचें: landscape में 1180 px की चौड़ाई 10.9 इंच की स्क्रीन पर आपका डेस्कटॉप लेआउट चालू कर सकती है।
- इमेज और वीडियो। टैबलेट की स्क्रीन हाई-डेंसिटी होती है, इसलिए कम resolution वाली इमेज धुँधली दिखती हैं।
टैबलेट के लिए सही breakpoints पर रिस्पॉन्सिव breakpoints में बात की गई है।
अक्सर पूछे जाने वाले सवाल
iPad टेस्टिंग के लिए कौन-सा स्क्रीन साइज़ इस्तेमाल करें?
820 × 1180 (iPad और iPad Air 11-inch) और 1024 × 1366 (13-inch मॉडल) से शुरू करें, दोनों ओरिएंटेशन में। अगर आपके दर्शकों में iPad mini मायने रखता है, तो 744 × 1133 भी जोड़ें।
मेरी साइट iPad पर डेस्कटॉप वर्शन क्यों दिखाती है?
iPad Safari डिफ़ॉल्ट रूप से डेस्कटॉप वेबसाइट माँगता है और Mac जैसा user agent भेजता है। अगर आपकी साइट user agent से अपना वर्शन चुनती है, तो iPad को डेस्कटॉप वाला मिलता है। CSS चौड़ाई पर आधारित रिस्पॉन्सिव लेआउट इस समस्या से बच जाता है।
क्या DevTools के बिना Chrome में टैबलेट व्यू टेस्ट कर सकते हैं?
हाँ। टैबलेट प्रीसेट वाला मोबाइल व्यू एक्सटेंशन, जैसे Mobile View Extension, टूलबार के एक बटन से टैबलेट साइज़ दिखाता है।