मैं डेस्कटॉप ब्राउज़र में किसी पेज का मोबाइल दृश्य जल्दी कैसे खोल सकता हूं?


49

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

आप डेस्कटॉप ब्राउज़र से वेबसाइट का मोबाइल दृश्य कैसे खोल सकते हैं?


23
"चूंकि अब हम मोबाइल-पहली दुनिया में हैं" वाह वहां एक मिनट ... संदर्भ राजाओं के लिए है।
मोनिका

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

1
अपने ब्राउज़र में कोई परिवर्तन उपयोगकर्ता एजेंट या समान एक्सटेंशन या प्लग जोड़ें , और स्मार्ट फ़ोन उपयोगकर्ता एजेंट सेट करें।
सलमान ए

1
"मैं लोगों को अपने डेस्कटॉप ब्राउज़रों से नियमित रूप से एक मोबाइल दृश्य में वेबसाइटों को खोलने के लिए प्रोत्साहित करना चाहूंगा।" ... यह नासमझ है। और उस सभी डेस्कटॉप स्क्रीन रियल एस्टेट को बर्बाद करें? डेस्कटॉप और मोबाइल दोनों में अपना स्थान है, और इसीलिए उत्तरदायी समाधान विकसित किए गए हैं। आइए प्रत्येक उपयोगकर्ता के लिए सर्वोत्तम अनुभव प्रदान करें, और लोगों को उस डिवाइस पर ब्राउज़ करने दें जो उनके लिए सबसे आरामदायक हो। वैसे भी, वैध प्रश्न, जैसा कि वेब डिजाइनर और डेवलपर्स को साइट बनाते समय कई उपकरणों का अनुकरण करने की आवश्यकता होती है।
मेंटलिस्ट

2
@ मैंटलिस्ट का मतलब उन लोगों से था जो वेबसाइट और सोशल मीडिया प्रसाद पर काम कर रहे हैं।
फ्लिम

जवाबों:


91

फ़ायरफ़ॉक्स:

  • विंडोज / लिनक्स में, Ctrl+ Shift+ दबाएँM
  • MacOS में, option+ command+ दबाएँM

आप ("टूल"), "वेब डेवलपर", "उत्तरदायी डिज़ाइन मोड" के तहत मेनू आइटम भी पा सकते हैं।

क्रोम:

आपको पहले "डेवलपर टूल" खोलना होगा:

  • विंडोज़ / लिनक्स में, प्रेस Ctrl+ Shift+ Iया बसF12
  • MacOS में, option+ command+ दबाएँI

एक बार डेवलपर टूल खुले और केंद्रित होने के बाद, आप उपकरण टूलबार खोल सकते हैं:

  • विंडोज / लिनक्स में, Ctrl+ Shift+ दबाएँM
  • MacOS में, command+ shift+ दबाएँM

आप डेवलपर टूल ("अधिक टूल", "डेवलेपर टूल्स") खोलकर और फिर एक टेबल "टॉगल डिवाइस टूलबार" के सामने एक मोबाइल फोन की तरह दिखने वाले आइकन पर क्लिक करके मेनू आइटम भी पा सकते हैं।

सफारी:

ऐसा लगता है कि उत्तरदायी डिज़ाइन मोड में प्रवेश करने के लिए Apple डिफ़ॉल्ट रूप से कीबोर्ड शॉर्टकट द्वारा अक्षम हो गया है। आप इसके लिए कीबोर्ड शॉर्टकट को कॉन्फ़िगर करने पर इस ट्यूटोरियल का अनुसरण कर सकते हैं ।

आप "विकसित करें", "उत्तरदायी डिजाइन मोड दर्ज करें" पर क्लिक करके मेनू आइटम पा सकते हैं। यदि आप "विकसित" मेनू आइटम नहीं देख सकते हैं, तो आपको "प्राथमिकताएँ", "उन्नत", और मेनू बार में "शो डेवलपमेंट मेनू दिखाएँ" को खोलकर इसे सक्षम करने की आवश्यकता है।

एज:

  • F12डेवलपर टूल खोलने के लिए दबाएँ , और फिर "एमुलेशन टैब" खोलने के लिए Ctrl+ 7। उस डिवाइस को कॉन्फ़िगर करें जिसे आप अनुकरण करना चाहते हैं।

आप वेबपेज के अंदर राइट-क्लिक करके और "इंस्पेक्ट एलिमेंट" चुनकर डेवलपर टूल्स का उपयोग कर सकते हैं।


1
ध्यान दें कि ctrl shift M तभी काम करता है जब डेवलपर टूल पहले से खुले हों
Naramsim

3
@ नरसिम साभार यह केवल क्रोम पर लागू होता है। मैंने अपना उत्तर संपादित कर दिया है।
फ़्लिम

3
विंडोज / क्रोम के लिए, F12 देव टूल्स को प्राप्त करने का एक संभावित आसान तरीका है ... हालाँकि अगर अगला कीस्ट्रोक Ctrl-Shift-M होने जा रहा है, तो मुझे लगता है कि Ctrl-Shift-I से शुरू करना अधिक तार्किक हो सकता है।
s

मुझे लगता है कि सफारी सीएमडी + शिफ्ट + आर के पिछले संस्करणों पर उत्तरदायी डिजाइन मोड खुलेगा। लगता है कि नवीनतम संस्करण में मौजूद नहीं है जब तक कि आप इसे मैन्युअल रूप से बाँध नहीं
लेते हैं

यदि आप एक मोबाइल पूर्वावलोकन चाहते हैं, तो क्रोम याद रखता है, इसलिए एक बार जब आप इसे सक्षम कर लेते हैं, तो आप मोबाइल / डेस्कटॉप के बीच बस F12 का उपयोग करके टॉगल कर सकते हैं
Pieter De Bie

11

फ्लिम का जवाब 100% सही है। अगर शॉर्टकट को याद रखने में बहुत परेशानी होती है, तो डेवलपर टूल में यह ब्लू बटन वेब व्यू और मोबाइल / टैबलेट व्यू के बीच टॉगल करने के लिए है:

क्रोम

या फ़ायरफ़ॉक्स के साथ:

फ़ायरफ़ॉक्स

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


1
पहला भाग किस सॉफ्टवेयर का उल्लेख करता है?
कामिल मैकियोरोस्की

@KamilMaciorowski DevTools डेवलपर टूल है जो क्रोम और ओपेरा में पाया जाता है।
ऑप्टिमसक्राइम

@KamilMaciorowski यह एक सॉफ्टवेयर नहीं है, यह आपके किसी भी वेब ब्राउजर पर उपलब्ध है। विशेष रूप से यदि आप क्रोम का उपयोग कर रहे हैं, तो किसी भी विंडो पर राइट क्लिक करें और निरीक्षण पर क्लिक करें और आप इस विंडो को अपने ब्राउज़र में नीचे या ब्राउज़र के दाईं ओर डॉक करेंगे। इन्हें सामान्यतः देव उपकरण के रूप में जाना जाता है।
शोभित गर्ग

@ शोबिट गर्ग क्या वह विंडो है, जो सीटीआरएल + शिफ्ट + सी दबाने पर खुलती है?
डैनियल.न्यूमन

@ daniel.neumann दुर्भाग्य से मैं मैक का उपयोग करता हूं, इसलिए जब आप उन कुंजियों को दबाते हैं तो मैं परीक्षण और देख नहीं सकता कि क्या होता है। लेकिन ऊपर सूचीबद्ध शॉर्टकट का जिक्र करते हुए, इस विंडो को क्रोम पर "ctrl + shift + I" दबाकर, फ़ायरफ़ॉक्स पर "ctrl + shift + M" या IE / Edge पर f12 दबाकर खुलना चाहिए।
शोभित गर्ग

2

परीक्षण के उद्देश्य से, मैं निम्नलिखित वेबसाइटों का उपयोग करता हूं: -

  1. http://www.jamus.co.uk/demos/rwd-demonstrations/
  2. http://mattkersley.com/responsive/

उपरोक्त दोनों साइटें मुझे कई डिवाइस चौड़ाई में अपना वेब एप्लिकेशन देखने की अनुमति देती हैं।


1

अपने ब्राउज़र में "उपयोगकर्ता एजेंट स्विचर" एक्सटेंशन जोड़ें और मोबाइल उपयोगकर्ता एजेंट निर्दिष्ट करें। यदि वेबसाइट काफी स्मार्ट है, तो यह आपको मोबाइल अनुकूलित संस्करण प्रदान करेगा।

मैं किसी विशेष विस्तार की सिफारिश नहीं करूंगा। आदर्श में अंतर्निहित मोबाइल ब्राउज़रों के लिए प्रीसेट होना चाहिए और प्रति-वेबसाइट के आधार पर उपयोगकर्ता एजेंट को सक्षम या अक्षम करने की क्षमता होनी चाहिए।


1
यह गलत है। मोबाइल लेआउट को सीएसएस मीडिया प्रश्नों के माध्यम से डिवाइस / स्क्रीन आयामों के आधार पर काम करना चाहिए, न कि उपयोगकर्ता एजेंट स्ट्रिंग्स - यह 2006 से अधिक नहीं है।
PiX06

अधिकांश ब्राउज़र का उपकरण जो मोबाइल दृश्य की अनुमति देता है, आपको उसी समय उपयोगकर्ता-एजेंट सेट करने देता है।
फ़्लिम

1
@ PiX06 तो कोई प्रयास आवश्यक नहीं है। बस ब्राउज़र विंडो का आकार बदलें!
सलमान एक

दुर्भाग्य से, मैं खुद को कई सवालों के साथ पाता हूं: अगर मैं वैसे भी ब्राउज़र विंडो का आकार बदल रहा हूं, तो मुझे उपयोगकर्ता एजेंटों के साथ परेशान करने की आवश्यकता क्यों है? मुझे विंडो को किन आयामों में बदलना चाहिए? मैं खिड़की को कैसे मापूं?
मैथ्यू के।

0

उपरोक्त उत्तर उन लोगों के लिए बहुत अच्छा है, जो एकल ब्राउज़र के साथ रहना पसंद करते हैं, या जिनके पास सीमित डेस्कटॉप "वर्कस्पेस" है (उदाहरण के लिए, कम रिज़ॉर्ट में 21 से कम एकल मॉनिटर)।

वास्तव में एक और भी दिलचस्प समाधान है जो मैंने हाल ही में खोजा है: https://blisk.io/

मैं किसी भी व्यक्तिगत लाभ के लिए "संबद्ध लिंक" का उपयोग करने से बचना चाहूंगा (एक "टोकन आधारित प्रणाली" है कि आप मुफ्त "टीम क्लाउड स्पेस" और "प्रीमियम फीचर्स" जैसी चीजों का उपयोग करने के लिए क्रेडिट कमा सकते हैं। यह), लेकिन ब्लिस वास्तव में बहुत सुंदर है।

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

यह एक काम है। हालाँकि इसकी "फ्रीमियम विस्तारित कार्यक्षमता" की कुछ सीमाएँ हैं, फिर भी यह साइड-बाय-साइड तुलना में आपके पृष्ठों / साइटों के पीसी और मोबाइल दोनों संस्करणों का "पूर्वावलोकन" करने के लिए बहुत अच्छी तरह से काम करता है। यदि आप दूरस्थ टीमों में काम करते हैं, तो भी पेड फीचर्स बहुत ज्यादा अच्छे लगते हैं (हालांकि मुझे व्यक्तिगत रूप से लगता है कि मासिक खर्च पर लोगों को हुक करने से पहले एक बेहतर "टेस्ट ड्राइव" प्रोग्राम की आवश्यकता होती है)।

पूर्ण प्रकटीकरण: मोबाइल पूर्वावलोकन भाग पर प्रति दिन एक "कष्टप्रद" समय सीमा "है" ऊपरी दाएं कोने में मेनू "डिवाइस सूची दिखाएं")।

BliskDemoScreenshot

इसके अलावा: मैंने क्रोम / फ़ायरफ़ॉक्स से 2 अलग-अलग "यूज़र-एजेंट स्विचर" जैसे ब्राउज़र एक्सटेंशन के साथ कुछ बहुत ही निफ्टी ट्रिक्स पाए हैं जो आपको विभिन्न ऑपरेटिंग सिस्टम के ब्राउज़र उपयोगकर्ता-एजेंट स्ट्रिंग्स के बीच टॉगल करने से थोड़ा आगे जाते हैं और उनके लिए ब्राउज़र।

मैं "esolutions.se" स्वाद पसंद करता हूं क्योंकि सूची में कस्टम उपयोगकर्ता-एजेंट स्ट्रिंग्स को जोड़ना कितना आसान है क्योंकि आप जितनी चाहें उतने अनुकूलन कर सकते हैं (ऑफ़लाइन भी चलाता है, जो कुछ मामलों में आसान हो सकता है): https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

वैसे भी, यह मेरा 2 सेंट है। : पी

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.