डेस्कटॉप कंप्यूटर पर किसी वेबसाइट का मोबाइल वर्शन चार तरीकों से देख सकते हैं: ब्राउज़र विंडो छोटी करके, Chrome DevTools के device mode से, मोबाइल व्यू एक्सटेंशन इंस्टॉल करके, या पेज को फ़ोन एमुलेटर में खोलकर। पहला तरीका तेज़ है, लेकिन अक्सर ग़लत नतीजा देता है। बाक़ी तीन साइट से उसका असली मोबाइल लेआउट माँगते हैं, और आम तौर पर आपको यही चाहिए।
कौन-सा तरीका सही है, यह इस पर निर्भर है कि आप क्यों देख रहे हैं। spacing जाँचने वाले डिज़ाइनर की ज़रूरत उस मार्केटर से अलग है जो देखना चाहता है कि ग्राहक iPhone पर क्या देखते हैं, या उस डेवलपर से जो ऐसा bug ढूँढ रहा है जो सिर्फ़ Android पर होता है।
पतली ब्राउज़र विंडो मोबाइल वर्शन क्यों नहीं है
विंडो का किनारा खींचने से viewport पतला होता है, CSS media queries चलती हैं और रिस्पॉन्सिव लेआउट दोबारा व्यवस्थित हो जाता है। यह हिस्सा काम करता है। जो नहीं बदलता, वह है आपके डिवाइस के बारे में साइट की बाक़ी सारी जानकारी।
फ़ोन मोबाइल user agent स्ट्रिंग और Sec-CH-UA-Mobile: ?1 जैसे client hints भेजता है। वह JavaScript को छोटा स्क्रीन साइज़, ऊँचा device pixel ratio और touch सपोर्ट बताता है। कुछ साइटें इन संकेतों से अलग पेज, अलग m. सबडोमेन, हल्की इमेज या अलग मेन्यू भेजती हैं। पतली डेस्कटॉप विंडो इनमें से कुछ नहीं भेजती, इसलिए आप दबा हुआ डेस्कटॉप पेज देखते रह सकते हैं।
एक व्यावहारिक सीमा भी है: डेस्कटॉप Chrome आम तौर पर विंडो को 500 पिक्सेल से ज़्यादा छोटा नहीं होने देता, जबकि कई फ़ोन का viewport 360 से 440 CSS पिक्सेल होता है।
तरीका 1: Chrome DevTools का device mode
Chrome में फ़ोन एमुलेटर पहले से मौजूद है। F12 (या Mac पर Cmd + Option + I) से DevTools खोलें, फिर device toolbar चालू करने के लिए Mac पर Cmd + Shift + M या Windows पर Ctrl + Shift + M दबाएँ। Dimensions लिस्ट से कोई डिवाइस चुनें और पेज रीलोड करें।
device mode viewport, device pixel ratio और user agent बदलता है, और touch events पर भी स्विच कर सकता है। यह नेटवर्क और CPU को धीमा भी करता है, जो स्पीड टेस्ट में मदद करता है। Google इसे फ़ोन का “first-order approximation”, यानी मोटा अंदाज़ा कहता है, क्योंकि आपके कंप्यूटर का CPU और ब्राउज़र फिर भी डेस्कटॉप वाले ही हैं।
कमी यह है कि इसमें झंझट है। DevTools स्क्रीन का एक तिहाई हिस्सा ले लेता है, प्रीसेट सामान्य हैं, और हर टैब के लिए सब कुछ दोबारा सेट करना पड़ता है। पूरी प्रक्रिया Chrome मोबाइल एमुलेटर गाइड में है।
तरीका 2: मोबाइल व्यू एक्सटेंशन
मोबाइल व्यू एक्सटेंशन यही मुख्य काम टूलबार के एक बटन से करता है, DevTools खोले बिना। उदाहरण के लिए, Chrome का Mobile View Extension मौजूदा टैब को फ़ोन या टैबलेट के फ़्रेम में डिवाइस के हिसाब से user agent, स्क्रीन साइज़ और device pixel ratio के साथ रीलोड करता है। आप Apple या Android का नाम वाला प्रीसेट चुनते हैं, portrait और landscape के बीच बदलते हैं, और फ़्रेम वाले व्यू का PNG स्क्रीनशॉट लेते हैं।
जब आप अक्सर पेज जाँचते हैं, किसी क्लाइंट की साइट रिव्यू करते हैं, या ब्राउज़ करते हुए पेज को “फ़ोन की तरह” देखना चाहते हैं, तो यह सबसे तेज़ विकल्प है। पेज बदलने पर भी प्रीव्यू चालू रहता है, और यह localhost पर काम करता है।
इसकी कुछ सीमाएँ जानने लायक़ हैं। प्रीव्यू डेस्कटॉप Chrome के अंदर एक फ़्रेम में चलता है, इसलिए touch events नहीं बनते और आप फिर भी माउस से इंटरैक्ट करते हैं। Hover और pointer वाली media queries पूरी तरह एमुलेट नहीं होतीं। touch gestures या असली हार्डवेयर पर परफ़ॉर्मेंस के लिए असली फ़ोन इस्तेमाल करें। दोनों तरीकों के फ़ायदे-नुक़सान मोबाइल सिम्युलेटर एक्सटेंशन बनाम DevTools में तुलना करके बताए गए हैं।
तरीका 3: फ़ोन एमुलेटर या simulator
जब आपको मोबाइल होने का दिखावा करता डेस्कटॉप Chrome नहीं, बल्कि असली मोबाइल ब्राउज़र चाहिए, तो एमुलेटर इस्तेमाल करें:
- Xcode Simulator (सिर्फ़ macOS) असली iOS Safari चलाता है। iPhone के बिना iPhone के सबसे क़रीब यही है। देखें बिना iPhone के वेबसाइट को iPhone पर कैसे टेस्ट करें।
- Android Studio Emulator Windows, macOS या Linux पर Chrome वाला Android चलाता है। देखें वेबसाइट को Android पर कैसे टेस्ट करें।
दोनों मुफ़्त हैं, दोनों भारी डाउनलोड हैं, और दोनों को शुरू होने में कुछ मिनट लगते हैं। इंजन से जुड़े bugs के लिए, जैसे ऐसा लेआउट जो सिर्फ़ Safari में टूटता है, यही सही टूल हैं।
तरीका 4: मोबाइल साइट सीधे माँगें
कुछ पुरानी साइटें अब भी m.example.com जैसे पते पर अलग मोबाइल साइट चलाती हैं। डेस्कटॉप ब्राउज़र में यह पता टाइप करने से अक्सर सीधे मोबाइल पेज दिखते हैं। आधुनिक साइटें शायद ही ऐसे काम करती हैं, और कई डेस्कटॉप विज़िटर को वापस मुख्य डोमेन पर भेज देती हैं, इसलिए इसे तरीका नहीं, कुछ ख़ास साइटों के लिए शॉर्टकट मानें।
कौन-सा तरीका कब
| लक्ष्य | सबसे अच्छा तरीका | क्यों |
|---|---|---|
| जल्दी देखना कि फ़ोन पर पेज कैसा दिखता है | मोबाइल व्यू एक्सटेंशन | एक क्लिक, असली मोबाइल user agent, ब्राउज़ करते समय चालू रहता है |
| मोबाइल लेआउट पर CSS या JavaScript डीबग करना | DevTools device mode | Elements, Console और Network पैनल प्रीव्यू के बगल में |
| सिर्फ़ Safari वाला bug जाँचना | Xcode Simulator या असली iPhone | WebKit के bugs सिर्फ़ WebKit दिखाता है |
| मोबाइल स्पीड मापना | DevTools throttling या मोबाइल पेज स्पीड टेस्ट | डेस्कटॉप हार्डवेयर धीमी स्क्रिप्ट को छिपा देता है |
| टैप टारगेट और gestures जाँचना | असली फ़ोन | माउस क्लिक अँगूठे की नक़ल नहीं कर सकता |
मोबाइल वर्शन खुलने के बाद क्या देखें
मोबाइल व्यू खोलना आसान हिस्सा है। काम का हिस्सा है एक छोटी चेकलिस्ट:
- टेक्स्ट बिना ज़ूम किए पढ़ा जा सकता है, और मुख्य टेक्स्ट कम-से-कम 16 px है।
- कुछ भी साइड में स्क्रॉल नहीं होता। हॉरिज़ॉन्टल स्क्रॉलबार का मतलब आम तौर पर तय चौड़ाई वाला एलिमेंट या चौड़ी टेबल होता है।
- मेन्यू खुलता है, बंद होता है और अँगूठे से इस्तेमाल किया जा सकता है।
- बटन और लिंक टैप करने के लिए एक-दूसरे से काफ़ी दूर हैं।
- फ़ॉर्म सही कीबोर्ड दिखाते हैं और sticky पट्टियों से ढके नहीं हैं।
- इमेज हाई-डेंसिटी स्क्रीन पर साफ़ हैं, लेकिन भारी डाउनलोड नहीं।
लॉन्च से पहले की पूरी लिस्ट के लिए मोबाइल वेबसाइट टेस्टिंग चेकलिस्ट इस्तेमाल करें।
अक्सर पूछे जाने वाले सवाल
क्या बिना एक्सटेंशन के Chrome में वेबसाइट का मोबाइल वर्शन देख सकते हैं?
हाँ। DevTools खोलें और Ctrl + Shift + M (Mac पर Cmd + Shift + M) से device toolbar चालू करें। एक्सटेंशन ये स्टेप बचाता है और हर टैब के लिए सेटिंग याद रखता है।
क्या ज़ूम-आउट करने या विंडो छोटी करने से मोबाइल साइट दिखती है?
विंडो छोटी करने से दिखता है कि उस चौड़ाई पर रिस्पॉन्सिव लेआउट कैसे दोबारा व्यवस्थित होता है। यह मोबाइल user agent नहीं भेजता, इसलिए डिवाइस पहचानने वाली साइटें फिर भी अपना डेस्कटॉप वर्शन भेजेंगी।
क्या डेस्कटॉप पर मोबाइल व्यू हूबहू वही है जो फ़ोन दिखाता है?
क़रीब है, लेकिन बिल्कुल वैसा नहीं। डेस्कटॉप टूल viewport और साइट के पढ़े जाने वाले संकेत बदलते हैं। वे rendering इंजन, CPU या touch इनपुट नहीं बदलते। आख़िरी जाँच के लिए पेज को असली फ़ोन पर खोलें।