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

सौभाग्य से, यह एक अपेक्षाकृत सीधी प्रक्रिया है। इस लेख में, हम आपको दिखाएंगे कि विभिन्न उपकरणों और ब्राउज़रों पर किसी वेबसाइट का मोबाइल संस्करण कैसे देखें।
मैक पर क्रोम में वेबसाइट का मोबाइल वर्जन कैसे देखें
Chrome में, आप DevTools नामक बिल्ट-इन डेवलपर टूल का उपयोग करके फ्रंट एंड का परीक्षण कर सकते हैं और देख सकते हैं कि वेबसाइट के सभी घटक ठीक से काम कर रहे हैं या नहीं। क्योंकि यह पूर्वनिर्धारित डिवाइस विकल्प प्रदान करता है, DevTools डेवलपर के लिए किसी भी डेवलपर एक्सटेंशन के बिना डेस्कटॉप से मोबाइल और इसके विपरीत दृश्य को तेजी से स्थानांतरित करने का सबसे अच्छा तरीका है।
आप अपनी आवश्यकताओं के अनुसार स्क्रीन का आकार भी बदल सकते हैं और यह देखने के लिए स्क्रीन की चौड़ाई और ऊंचाई समायोजित कर सकते हैं कि आपकी वेबसाइट विभिन्न स्क्रीन आकारों पर कैसी दिखेगी। मैक पर ऐसा करने के लिए, इन चरणों का पालन करें:
- Google क्रोम ब्राउज़र लॉन्च करें और उस साइट पर जाएं जिसे आप देखना चाहते हैं।

- DevTools तक पहुँचने के लिए अपने कीबोर्ड पर F12 दबाएं।

- मोड चालू होने पर, "टॉगल डिवाइस इम्यूलेशन" आइकन पर क्लिक करें।

- आप उनका अनुकरण करने के लिए iOS और Android उपकरणों की सूची में से चुन सकते हैं।

- यह आपके द्वारा चुने गए मोबाइल फॉर्म में वेबसाइट दिखाएगा।

जब आप समाप्त कर लें, तो वेबसाइट के मोबाइल संस्करण को बंद करने के लिए डेवलपर टूल विंडो को बंद कर दें।
विंडोज पीसी पर क्रोम में वेबसाइट का मोबाइल वर्जन कैसे देखें
यदि आप क्रोम में विंडोज़ पीसी पर किसी वेबसाइट का मोबाइल संस्करण देखना चाहते हैं, तो यह काफी समान प्रक्रिया है:
- क्रोम ब्राउज़र खोलें।

- क्रोम में, उस वेबसाइट पर जाएं जिसे आप मोबाइल संस्करण में देखना चाहते हैं।
- वेबपेज पर राइट-क्लिक करें और मेनू से "निरीक्षण" चुनें।

- डेवलपर टूल पर जाने के लिए, "अधिक टूल" टैब पर क्लिक करें और "डेवलपर टूल" चुनें या DevTools खोलने के लिए F12 दबाएं।

- डेवलपर टूल विंडो खुल जाएगी।
- मोबाइल साइट व्यू मोड में स्विच करने के लिए डिवाइस टॉगल आइकन पर क्लिक करें।

- वह मोबाइल डिवाइस चुनें जिसका आप अनुकरण करना चाहते हैं (वैकल्पिक)।

- अब आप अपनी आवश्यकताओं के अनुरूप स्क्रीन के आयामों को संशोधित कर सकते हैं।
Chrome बुक पर Chrome में किसी वेबसाइट का मोबाइल संस्करण कैसे देखें
Chrome बुक का उपयोग करके Chrome में किसी वेबसाइट के मोबाइल संस्करण तक पहुँचना पहले दो विधियों के समान है।
- Google क्रोम वेब ब्राउज़र खोलें।

- वह वेबपृष्ठ खोलें जिसे आप अपने मोबाइल डिवाइस पर एक्सेस करना चाहते हैं।

- मेनू तक पहुँचने के लिए, वर्टिकल थ्री डॉट्स आइकन पर क्लिक करें।

- सूची में अपने माउस को अधिक टूल आइटम पर खींचें।

- "डेवलपर टूल" चुनें।

- ब्राउज़र में डेवलपर टूल विंडो खुल जाएगी।

- डिवाइस टॉगल आइकन पर क्लिक करके मोबाइल साइट व्यू मोड को टॉगल करें।

यह मोबाइल साइट के लिए यूजर इंटरफेस लाएगा। आप ड्रॉपडाउन बॉक्स से मेक और मॉडल का चयन करके पसंदीदा डिवाइस अनुभव भी चुन सकते हैं। जब भी आप डेवलपर टूल कंसोल को बंद करेंगे, तो वेबपृष्ठ एक डेस्कटॉप साइट के रूप में ताज़ा हो जाएगा।
मैक पर Firefox में किसी वेबसाइट का मोबाइल संस्करण कैसे देखें
मैक डेस्कटॉप पर मोबाइल साइट देखने के लिए आप फ़ायरफ़ॉक्स जैसे अन्य वेब ब्राउज़र का उपयोग कर सकते हैं। ब्राउज़र विंडो का आकार बदलना उन तरीकों में से एक है जिसका उपयोग अधिकांश वेब डेवलपर उत्तरदायी डिज़ाइन वेबसाइट का मूल्यांकन करने के लिए करते हैं। हालांकि, ज्यादातर समय, यह विकल्प स्वीकार्य नहीं दिखाई देगा।
यहीं पर Firefox ब्राउज़र की वेब विकास क्षमताएं काम आती हैं। यदि आप जानते हैं कि फ़ायरफ़ॉक्स में वेबसाइटों के मोबाइल संस्करणों तक कैसे पहुँचना है, तो आप अपने वेब पेजों को कई रिज़ॉल्यूशन में ब्राउज़ कर सकते हैं। इन चरणों का पालन करें:
- आप जिस वेबसाइट को देखना चाहते हैं उसका मोबाइल संस्करण खोलें।
- वेबपेज पर राइट-क्लिक करें और मेनू से "निरीक्षण" विकल्प चुनें।

- "उत्तरदायी डिज़ाइन मोड" चुनें।

- वेबसाइट का स्क्रीन आकार चुनें।

विंडोज़ पीसी पर फ़ायरफ़ॉक्स में वेबसाइट का मोबाइल संस्करण कैसे देखें
विंडोज पीसी में फ़ायरफ़ॉक्स का उपयोग कर वेबसाइटों के मोबाइल संस्करण देखने का विकल्प भी है। ऐसा करने का तरीका यहां दिया गया है:
- अपने पीसी पर फ़ायरफ़ॉक्स प्रारंभ करें।

- उस वेबसाइट पर जाएं जिसे आप मोबाइल संस्करण के रूप में देखना चाहते हैं।

- क्षैतिज तीन-बार आइकन पर क्लिक करके "सेटिंग" पर जाएं।

- आपको एक ड्रॉप-डाउन मेनू दिखाई देगा जहां आपको "वेब डेवलपर" विकल्प चुनना होगा।

- "उत्तरदायी डिज़ाइन मोड" चुनें।

- अंत में, आप यह देखने के लिए एक स्मार्टफोन मॉडल का चयन कर सकते हैं कि उस डिवाइस पर आपकी साइट कैसी दिखाई देगी।

Mac पर Safari में किसी वेबसाइट का मोबाइल संस्करण कैसे देखें
हमने क्रोम और फ़ायरफ़ॉक्स का उपयोग करके डेस्कटॉप पर मोबाइल वेबसाइट देखने का तरीका बताया है। लेकिन मैक डिवाइस, सफारी के साथ आने वाले डिफ़ॉल्ट ब्राउज़र के बारे में क्या? सौभाग्य से, सफारी में वेबसाइट का मोबाइल संस्करण भी देखना संभव है।
- सफ़ारी ब्राउज़र लॉन्च करें।

- उस वेबसाइट पर जाएं जिसे आप मोबाइल संस्करण के रूप में देखना चाहते हैं।

- "विकल्प" पर क्लिक करें और फिर "विकसित करें" मेनू पर क्लिक करें।

- ड्रॉप-डाउन मेनू से, "उत्तरदायी डिज़ाइन मोड दर्ज करें" चुनें।

- अब आप वेबसाइट का मोबाइल संस्करण देख सकते हैं।

अतिरिक्त अक्सर पूछे जाने वाले प्रश्न
क्या मैं अपने फ़ोन पर किसी वेबसाइट का डेस्कटॉप संस्करण देख सकता हूँ?
उत्तर है, हाँ! कंप्यूटर का उपयोग किए बिना इसे देखने के लिए आप मोबाइल संस्करण से डेस्कटॉप संस्करण पर स्विच कर सकते हैं। Chrome में मोबाइल संस्करण को डेस्कटॉप संस्करण में स्थानांतरित करने के चरण इस प्रकार हैं:
1. उस वेबसाइट पर जाएं जिसे आप डेस्कटॉप व्यू में देखना चाहते हैं।
2. मेनू तक पहुंचने के लिए तीन बिंदुओं वाले आइकन पर टैप करें।
3. अब "डेस्कटॉप व्यू" विकल्प चुनें।
ध्यान रखें कि ये चरण आपके द्वारा उपयोग किए जा रहे फ़ोन के आधार पर भिन्न हो सकते हैं।
मोबाइल वेब डिजाइनिंग को आसान बनाना
डिवाइस स्विच किए बिना डेस्कटॉप पर किसी वेबसाइट के मोबाइल संस्करण का विश्लेषण और संशोधन करने के लिए डेवलपर टूल बहुत अच्छे हैं। विभिन्न उपकरणों पर घटक कैसे काम करते हैं, यह देखने के लिए आप स्क्रीन का आकार बदल सकते हैं। आप उत्तरदायी मोड का उपयोग करके विभिन्न घटकों को समायोजित कर सकते हैं और कई स्क्रीन आकारों के लिए वेबसाइट बना सकते हैं।
वेबसाइट डिजाइन करते समय, डिजाइनर को हमेशा यह ध्यान रखना चाहिए कि फोन, टैबलेट और डेस्कटॉप पर साइट का फ्रंट एंड कैसा दिखता है। लेख में वर्णित विधियों का उपयोग करने से डेवलपर को ऐसा करने में मदद मिल सकती है और यह भी पता चल सकता है कि वेबसाइट के कौन से घटक उन्हें ठीक करने के लिए समस्याएं पैदा कर रहे हैं।
क्या आपने कभी अपने डेस्कटॉप पर किसी साइट का मोबाइल संस्करण देखने का प्रयास किया है? ऐसा करने के लिए आप किस ब्राउज़र का उपयोग करना पसंद करते हैं? नीचे टिप्पणी अनुभाग में हमें बताएं।