Safari 9 में उत्तरदायी डिजाइन मोड को सक्रिय और उपयोग कैसे करें

06 में से 01

सफारी 9 में उत्तरदायी डिजाइन मोड को सक्रिय और उपयोग करें

© स्कॉट ऑर्गेरा।

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

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

यह ट्यूटोरियल विवरण देता है कि कैसे उत्तरदायी डिजाइन मोड को सक्रिय करने के साथ-साथ अपनी विकास आवश्यकताओं के लिए इसका उपयोग कैसे करें।

सबसे पहले, अपना सफारी ब्राउज़र खोलें।

06 में से 02

सफारी प्राथमिकताएं

© स्कॉट ऑर्गेरा।

स्क्रीन के शीर्ष पर स्थित ब्राउज़र मेनू में सफारी पर क्लिक करें। जब ड्रॉप-डाउन मेनू प्रकट होता है, तो ऊपर दिए गए उदाहरण में प्रचलित वरीयता विकल्प_ का चयन करें।

कृपया ध्यान दें कि उपर्युक्त मेनू आइटम के बदले में आप निम्न कीबोर्ड शॉर्टकट का उपयोग कर सकते हैं: COMMAND + COMMA (,)

06 का 03

विकास मेनू दिखाएं

© स्कॉट ऑर्गेरा।

सफारी की प्राथमिकताएं संवाद अब प्रदर्शित होनी चाहिए, अपनी ब्राउज़र विंडो को ओवरले करना। सबसे पहले, एक गियर द्वारा प्रतिनिधित्व किए गए उन्नत आइकन_ पर क्लिक करें और विंडो के ऊपरी दाएं कोने में स्थित है।

ब्राउज़र की उन्नत प्राथमिकताएं अब दिखाई देनी चाहिए। निचले हिस्से में एक चेकबॉक्स के साथ एक विकल्प है, मेनू बार में शो डेवलपमेंट मेनू लेबल किया गया है और ऊपर दिए गए उदाहरण में घूमता है। इस मेनू को सक्रिय करने के लिए एक बार चेकबॉक्स पर क्लिक करें।

06 में से 04

उत्तरदायी डिजाइन मोड दर्ज करें

© स्कॉट ऑर्गेरा।

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

कृपया ध्यान दें कि उपर्युक्त मेनू आइटम के बदले में आप निम्न कीबोर्ड शॉर्टकट का उपयोग कर सकते हैं: विकल्प + COMMAND + R

06 में से 05

उत्तरदायी डिजाइन मोड

© स्कॉट ऑर्गेरा।

सक्रिय वेब पेज को अब उत्तरदायी डिजाइन मोड में प्रदर्शित किया जाना चाहिए, जैसा उपर्युक्त उदाहरण में दिखाया गया है। आईफोन 6 जैसे सूचीबद्ध आईओएस डिवाइसों में से एक या 800 x 600 जैसे नामित स्क्रीन संकल्पों में से एक का चयन करके, आप तुरंत देख सकते हैं कि पेज उस डिवाइस पर या उस डिस्प्ले रिज़ॉल्यूशन में कैसे प्रस्तुत करेगा।

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

06 में से 06

मेनू विकसित करें: अन्य विकल्प

© स्कॉट ऑर्गेरा।

उत्तरदायी डिजाइन मोड के अतिरिक्त, सफारी 9 का विकास मेनू कई अन्य उपयोगी विकल्प प्रदान करता है जो कुछ नीचे सूचीबद्ध हैं।

संबंधित पढ़ना

यदि आपको यह ट्यूटोरियल उपयोगी लगता है, तो हमारी अन्य सफारी 9 वॉकथ्रू देखें।