डिवाइस मोड की मदद से, मोबाइल डिवाइसों को सिम्युलेट करें

Kayce Basques

Sofia Emelianova

डिवाइस मोड का इस्तेमाल करके, यह अनुमान लगाएं कि आपका पेज मोबाइल डिवाइस पर कैसा दिखता है और कैसा काम करता है.

खास जानकारी

डिवाइस मोड, Chrome DevTools में मौजूद सुविधाओं के कलेक्शन का नाम है. ये सुविधाएं, मोबाइल डिवाइसों को सिम्युलेट करने में आपकी मदद करती हैं. इन सुविधाओं में ये शामिल हैं:

• मोबाइल व्यूपोर्ट का सिम्युलेशन करना
• सीपीयू थ्रॉटलिंग
• नेटवर्क थ्रॉटलिंग
  अहम जानकारी: इसके अलावा, नेटवर्क पैनल में जाकर, कनेक्शन की स्पीड को थ्रॉटल किया जा सकता है.
• इसके अलावा, सेंसर पैनल में जाकर:
  • भौगोलिक जगह की जानकारी का सिम्युलेशन करना
  • स्क्रीन की दिशा सेट करना

सीमाएं

डिवाइस मोड को इस बात का पहला अनुमान माना जा सकता है कि आपका पेज, फ़ोन या टैबलेट पर कैसा दिखेगा और कैसा लगेगा. डिवाइस मोड में, मोबाइल डिवाइस पर कोड नहीं चलाया जाता. लैपटॉप या डेस्कटॉप से, मोबाइल उपयोगकर्ता के अनुभव को सिम्युलेट किया जाता है.

मोबाइल डिवाइसों के कुछ पहलुओं को DevTools कभी भी सिम्युलेट नहीं कर पाएगा. उदाहरण के लिए, मोबाइल के सीपीयू का आर्किटेक्चर, लैपटॉप या डेस्कटॉप के सीपीयू के आर्किटेक्चर से बहुत अलग होता है. अगर आपको कोई शंका है, तो सबसे अच्छा तरीका यह है कि आप अपने पेज को मोबाइल डिवाइस पर चलाकर देखें. रिमोट डीबगिंग का इस्तेमाल करके, किसी पेज के कोड को अपने लैपटॉप या डेस्कटॉप से देखा जा सकता है. साथ ही, उसमें बदलाव किया जा सकता है, उसे डीबग किया जा सकता है, और उसकी प्रोफ़ाइल बनाई जा सकती है. ऐसा तब किया जा सकता है, जब वह कोड किसी मोबाइल डिवाइस पर चल रहा हो.

डिवाइस टूलबार खोलें

डिवाइस टूलबार खोलने के लिए, यह तरीका अपनाएं:

1. DevTools खोलें.
2. सबसे ऊपर मौजूद कार्रवाई बार में, डिवाइस डिवाइस टूलबार टॉगल करें पर क्लिक करें.

मोबाइल व्यूपोर्ट को सिम्युलेट करना

डिफ़ॉल्ट रूप से, डिवाइस टूलबार, व्यूपोर्ट में खुलता है. इसमें डाइमेंशन को रिस्पॉन्सिव पर सेट किया जाता है. डाइमेंशन ड्रॉप-डाउन का इस्तेमाल करके, किसी खास मोबाइल डिवाइस के डाइमेंशन को सिम्युलेट किया जा सकता है.

रिस्पॉन्सिव व्यूपोर्ट मोड

व्यूपोर्ट का साइज़ बदलने के लिए, हैंडल को खींचें और छोड़ें. इसके अलावा, चौड़ाई और ऊंचाई वाले बॉक्स में कोई वैल्यू डालें. इस उदाहरण में, चौड़ाई को 480 और ऊंचाई को 415 पर सेट किया गया है.

इसके अलावा, चौड़ाई के प्रीसेट बार का इस्तेमाल करके, चौड़ाई सेट की जा सकती है. इसके लिए, इनमें से किसी एक पर क्लिक करें:

Mobile S	मीडियम साइज़ का मोबाइल	बड़ा मोबाइल	टैबलेट	लैपटॉप	बड़ा लैपटॉप	4K
320 पिक्सल	375 पिक्सल	425 पिक्सल	768 पिक्सल	1024 पिक्सल	1440 पिक्सल	2560 पिक्सल

मीडिया क्वेरी दिखाएं

अपने व्यूपोर्ट के ऊपर मीडिया क्वेरी ब्रेकपॉइंट दिखाने के लिए, ज़्यादा विकल्प > मीडिया क्वेरी दिखाएं पर क्लिक करें.

DevTools अब व्यूपोर्ट के ऊपर दो और बार दिखाता है:

• max-width ब्रेकपॉइंट वाला नीला बार.
• min-width ब्रेकपॉइंट वाला नारंगी बार.

व्यूपोर्ट की चौड़ाई बदलने के लिए, ब्रेकपॉइंट के बीच क्लिक करें, ताकि ब्रेकपॉइंट ट्रिगर हो जाए.

इससे जुड़ा @media एलान ढूंढने के लिए, ब्रेकपॉइंट के बीच राइट क्लिक करें और सोर्स कोड में दिखाएं को चुनें. DevTools, सोर्स पैनल को एडिटर में मौजूद लाइन पर खोलता है.

डिवाइस पिक्सल का अनुपात सेट करना

डिवाइस पिक्सल रेशियो (डीपीआर), हार्डवेयर स्क्रीन पर मौजूद फ़िज़िकल पिक्सल और लॉजिकल (सीएसएस) पिक्सल के बीच का रेशियो होता है. दूसरे शब्दों में, डीपीआर से Chrome को यह पता चलता है कि सीएसएस पिक्सल को ड्रा करने के लिए, कितने स्क्रीन पिक्सल का इस्तेमाल करना है. Chrome, HiDPI (हाई डॉट्स पर इंच) डिसप्ले पर ड्रा करते समय, डीपीआर वैल्यू का इस्तेमाल करता है.

डीपीआर वैल्यू सेट करने के लिए:

1. ज़्यादा विकल्प > डिवाइस पिक्सल का अनुपात जोड़ें पर क्लिक करें.

   

2. व्यू पोर्ट के सबसे ऊपर मौजूद कार्रवाई बार में, नए DPR ड्रॉप-डाउन मेन्यू से कोई डीपीआर वैल्यू चुनें.

   

डिवाइस का टाइप सेट करना

मोबाइल डिवाइस या डेस्कटॉप डिवाइस का इस्तेमाल करने का अनुभव पाने के लिए, डिवाइस टाइप सूची का इस्तेमाल करें.

अगर आपको सबसे ऊपर मौजूद कार्रवाई बार में सूची नहीं दिखती है, तो ज़्यादा विकल्प > डिवाइस टाइप जोड़ें को चुनें.

यहां दी गई टेबल में, विकल्पों के बीच के अंतर के बारे में बताया गया है. रेंडरिंग के तरीके से पता चलता है कि Chrome, पेज को मोबाइल या डेस्कटॉप व्यूपोर्ट के तौर पर रेंडर करता है. कर्सर आइकॉन से पता चलता है कि पेज पर कर्सर घुमाने पर आपको किस तरह का कर्सर दिखता है. इवेंट फ़ायर हुए से पता चलता है कि पेज से इंटरैक्ट करने पर, पेज touch या click इवेंट फ़ायर करता है या नहीं.

विकल्प	रेंडरिंग का तरीका	कर्सर का आइकॉन	ट्रिगर किए गए इवेंट
मोबाइल	मोबाइल	सर्कल	छूना
मोबाइल (बिना टचस्क्रीन वाला)	मोबाइल	सामान्य	क्लिक
डेस्कटॉप	डेस्कटॉप	सामान्य	क्लिक
डेस्कटॉप (टच)	डेस्कटॉप	सर्कल	छूना

डिवाइस के हिसाब से मोड

किसी मोबाइल डिवाइस के डाइमेंशन को सिम्युलेट करने के लिए, डाइमेंशन सूची से डिवाइस चुनें.

ज़्यादा जानकारी के लिए, कस्टम मोबाइल डिवाइस जोड़ना लेख पढ़ें.

व्यूपोर्ट को लैंडस्केप ओरिएंटेशन में घुमाएं

व्यू पोर्ट को लैंडस्केप ओरिएंटेशन में घुमाने के लिए, screen_rotation घुमाएं पर क्लिक करें.

ध्यान दें कि अगर आपका डिवाइस टूलबार छोटा है, तो घुमाएं बटन नहीं दिखेगा.

स्क्रीन की दिशा सेट करना भी देखें.

ड्यूअल स्क्रीन मोड को टॉगल करें

कुछ डिवाइसों, जैसे कि Surface Duo में दो स्क्रीन होती हैं. इन दोनों स्क्रीन का इस्तेमाल दो तरीकों से किया जा सकता है: एक या दोनों स्क्रीन चालू करके.

ड्यूअल स्क्रीन और सिंगल स्क्रीन के बीच टॉगल करने के लिए, टूलबार में मौजूद devices_fold ड्यूअल स्क्रीन मोड टॉगल करें पर क्लिक करें.

डिवाइस पॉस्चर सेट करना

कुछ डिवाइसों में फ़ोल्ड की जा सकने वाली स्क्रीन होती हैं. जैसे, Asus Zenbook Fold. ऐसी स्क्रीन को दो तरह से इस्तेमाल किया जा सकता है: लगातार या फ़ोल्ड करके. लगातार इस्तेमाल करने का मतलब है कि स्क्रीन को "फ़्लैट" रखा गया है. वहीं, फ़ोल्ड करने पर स्क्रीन के सेक्शन के बीच एक ऐंगल बन जाता है.

डिवाइस का पोस्चर सेट करने के लिए, टूलबार में मौजूद ड्रॉप-डाउन मेन्यू से लगातार या मुड़ा हुआ चुनें.

डिवाइस का फ़्रेम दिखाएं

Nest Hub जैसे किसी मोबाइल डिवाइस के डाइमेंशन की नकल करते समय, ज़्यादा विकल्प > डिवाइस फ़्रेम दिखाएं को चुनें. इससे व्यूपोर्ट के चारों ओर डिवाइस का फ़्रेम दिखेगा.

ध्यान दें: अगर आपको किसी डिवाइस के लिए डिवाइस फ़्रेम नहीं दिखता है, तो इसका मतलब है कि DevTools के पास उस डिवाइस के लिए आर्ट नहीं है.

इस उदाहरण में, DevTools, Nest Hub के लिए फ़्रेम दिखाता है.

अपनी पसंद के मुताबिक़ कोई मोबाइल डिवाइस जोड़ना

अपनी पसंद का डिवाइस जोड़ने के लिए:

1. डिवाइस सूची पर क्लिक करें. इसके बाद, बदलाव करें को चुनें.

   

2. सेटिंग सेटिंग > डिवाइस टैब में जाकर, काम करने वाले डिवाइसों की सूची से कोई डिवाइस चुनें या अपना डिवाइस जोड़ने के लिए, कस्टम डिवाइस जोड़ें पर क्लिक करें.

3. अगर आपको कोई नया डिवाइस जोड़ना है, तो डिवाइस का नाम, चौड़ाई, और लंबाई डालें. इसके बाद, जोड़ें पर क्लिक करें.

   

   डिवाइस पिक्सल का अनुपात, उपयोगकर्ता एजेंट स्ट्रिंग, और डिवाइस टाइप फ़ील्ड भरना ज़रूरी नहीं है. डिवाइस टाइप फ़ील्ड, वह सूची है जिसे डिफ़ॉल्ट रूप से मोबाइल पर सेट किया जाता है.

4. व्यू पोर्ट में वापस जाकर, डाइमेंशन सूची से, जोड़े गए नए डिवाइस को चुनें.

पैमाना दिखाएं

रूलर देखने के लिए, ज़्यादा विकल्प > रूलर दिखाएं पर क्लिक करें. रूलर की साइज़िंग यूनिट पिक्सल होती है.

DevTools, व्यूपोर्ट के सबसे ऊपर और बाईं ओर रूलर दिखाता है.

व्यू पोर्ट की चौड़ाई और लंबाई सेट करने के लिए, खास निशान पर मौजूद रूलर पर क्लिक करें.

व्यूपोर्ट को ज़ूम करना

ज़ूम इन या ज़ूम आउट करने के लिए, ज़ूम सूची का इस्तेमाल करें.

स्क्रीनशॉट कैप्चर करना

व्यू पोर्ट में दिखने वाले कॉन्टेंट का स्क्रीनशॉट लेने के लिए, ज़्यादा विकल्प > स्क्रीनशॉट कैप्चर करें पर क्लिक करें.

अगर आपको पूरे पेज का स्क्रीनशॉट लेना है, तो उसी मेन्यू में जाकर फ़ुल साइज़ का स्क्रीनशॉट लें को चुनें. इसमें वह कॉन्टेंट भी शामिल होगा जो व्यूपोर्ट में नहीं दिख रहा है.

डिवाइस के हिसाब से मोड में स्क्रीनशॉट कैप्चर करते समय, डिवाइस फ़्रेम शामिल करने के लिए, पहले डिवाइस फ़्रेम दिखाएं पर क्लिक करें. इसके बाद, पहले बताए गए तरीके से स्क्रीनशॉट कैप्चर करें पर क्लिक करें.

DevTools की मदद से स्क्रीनशॉट लेने के अन्य तरीकों के बारे में जानने के लिए, DevTools की मदद से स्क्रीनशॉट लेने के चार तरीके लेख पढ़ें.

नेटवर्क और सीपीयू को थ्रॉटल करना

नेटवर्क और सीपीयू, दोनों की स्पीड कम करने के लिए, थ्रॉटल करें सूची से मिड-टियर मोबाइल या लो-एंड मोबाइल चुनें.

मिड-टियर मोबाइल, तेज़ 3G को सिम्युलेट करता है. साथ ही, यह आपके सीपीयू की परफ़ॉर्मेंस को धीमा कर देता है, ताकि यह सामान्य से चार गुना धीमा हो जाए. लो-एंड मोबाइल, धीमे 3G को सिम्युलेट करता है. साथ ही, आपके सीपीयू की परफ़ॉर्मेंस को सामान्य से छह गुना धीमा कर देता है. ध्यान रखें कि थ्रॉटलिंग, आपके लैपटॉप या डेस्कटॉप की सामान्य क्षमता के हिसाब से होती है.

ध्यान दें कि अगर आपका डिवाइस टूलबार छोटा है, तो थ्रॉटल सूची नहीं दिखेगी.

सिर्फ़ सीपीयू की स्पीड कम करें

अगर आपको सिर्फ़ सीपीयू को थ्रॉटल करना है, तो परफ़ॉर्मेंस पैनल पर जाएं. इसके बाद, कैप्चर सेटिंग पर क्लिक करें. इसके बाद, सीपीयू सूची से 4 गुना धीमा, 6 गुना धीमा या 20 गुना धीमा चुनें.

सिर्फ़ नेटवर्क को थ्रॉटल करें

अगर आपको सिर्फ़ नेटवर्क की स्पीड कम करनी है, न कि सीपीयू की, तो नेटवर्क पैनल पर जाएं. इसके बाद, थ्रॉटल सूची से तेज़ 3G या धीमा 3G चुनें.

इसके अलावा, Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux, ChromeOS) दबाकर कमांड मेन्यू खोलें. इसके बाद, 3G टाइप करें और तेज़ 3G थ्रॉटलिंग चालू करें या धीमी 3G थ्रॉटलिंग चालू करें को चुनें.

परफ़ॉर्मेंस पैनल से भी नेटवर्क थ्रॉटलिंग सेट की जा सकती है. कैप्चर सेटिंग पर क्लिक करें. इसके बाद, नेटवर्क सूची से तेज़ 3G या धीमा 3G चुनें.

सेंसरों को सिम्युलेट करना

जियोलोकेशन को बदलने, डिवाइस के ओरिएंटेशन को सिम्युलेट करने, फ़ोर्स टच करने, और आइडल स्टेट का अनुकरण करने के लिए, सेंसर पैनल का इस्तेमाल करें.

अगले सेक्शन में, जियोलोकेशन की जानकारी को बदलने और डिवाइस के ओरिएंटेशन को सेट करने के तरीके के बारे में खास जानकारी दी गई है. सुविधाओं की पूरी सूची देखने के लिए, डिवाइस सेंसर की नकल करना लेख पढ़ें.

जियोलोकेशन की जानकारी को बदलना

जियोलोकेशन की जानकारी बदलने वाला यूज़र इंटरफ़ेस (यूआई) खोलने के लिए, DevTools को पसंद के मुताबिक बनाएं और कंट्रोल करें पर क्लिक करें. इसके बाद, ज़्यादा टूल > सेंसर चुनें.

इसके अलावा, Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux, ChromeOS) दबाकर कमांड मेन्यू खोलें. इसके बाद, Sensors टाइप करें और सेंसर दिखाएं चुनें.

जगह की सूची में से कोई प्रीसेट चुनें. इसके अलावा, अपने कोऑर्डिनेट डालने के लिए अन्य... चुनें. अगर आपको यह टेस्ट करना है कि जियोलोकेशन की सुविधा काम न करने पर आपका पेज कैसा दिखता है, तो जगह की जानकारी उपलब्ध नहीं है चुनें.

स्क्रीन की दिशा सेट करें

ओरिएंटेशन यूज़र इंटरफ़ेस (यूआई) खोलने के लिए, DevTools को पसंद के मुताबिक बनाएं और कंट्रोल करें पर क्लिक करें. इसके बाद, ज़्यादा टूल > सेंसर चुनें.

इसके अलावा, Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux, ChromeOS) दबाकर कमांड मेन्यू खोलें. इसके बाद, Sensors टाइप करें और सेंसर दिखाएं चुनें.

ओरिएंटेशन सूची से कोई प्रीसेट चुनें या कस्टम ओरिएंटेशन चुनकर, अपनी ऐल्फ़ा, बीटा, और गामा वैल्यू सेट करें.