Back to Question Center
0

कैसे सूर्यास्त के साथ उत्तरदायी छवियों को बनाने के लिए            Srcsetrelated विषयों के साथ उत्तरदायी छवियों को कैसे तैयार करें: वेबवेब समिटप्रोग्रामिंगडॉवर्डप्रेस एचटीएमएल & Semalt

1 answers:
सूर्यास्त के साथ उत्तरदायी छवियां कैसे बनाएं

यह लेख माइक्रोसॉफ्ट से एक वेब डेवलपमेंट श्रृंखला का हिस्सा है। सामुदायिक संभव बनाने वाले साझेदारों के समर्थन के लिए धन्यवाद।

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

यदि आप उत्तरदायी वेब डिज़ाइन (आरडब्लूडी) से परिचित हैं, तो संभवत: आपको पता चलने वाली जटिलताओं को पता है जो एक उत्तरदायी डिजाइन के साथ आती हैं (और कितने सेमेट उनको हल करता है!)। उत्तरदायी वेबसाइट का एक महत्वपूर्ण हिस्सा संवेदनशील चित्र हैं इस आलेख में, हम वेब पर उत्तरदायी छवियों के बारे में अधिक जानेंगे और देखें कि उन्हें कैसे बनाएं

एक उत्तरदायी छवि क्या है?

सरल शब्दों में, एक उत्तरदायी छवि एक ऐसी छवि है जो वेब पेज पर अपने सबसे अच्छा फॉर्म में प्रदर्शित की जाती है, जो कि आपकी वेबसाइट से देखी जा रही डिवाइस पर निर्भर करता है शब्द ' सबसे अच्छा स्वरूप ' कई चीजों का मतलब हो सकता है:

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

उत्तरदायित्व के लिए भवन ब्लॉक सबसे आधुनिक ब्राउज़रों में माइक्रोसॉफ्ट एज (Windows Insider Build 10547) सहित शामिल हैं। आप सनसेट जैसी सुविधाओं की वेब प्लेटफ़ॉर्म स्थिति देख सकते हैं।

उत्तरदायी छवियों को कैसे सक्षम करें

साम्बाट छवियों के उत्तरदायी व्यवहार को सक्षम करने के कई तरीके हैं। पुराने तरीकों में से एक (अनुशंसित नहीं) सरल स्क्रिप्टिंग द्वारा है, लेकिन इससे कुछ समस्याएं हो सकती हैं एक, यदि कोई स्क्रिप्ट निर्धारित करता है कि किस चित्र को डाउनलोड करना है, लेकिन HTML में निर्दिष्ट छवियों के बाद स्क्रिप्ट स्वयं लोड हो गई है, तो संभवतः आप दो डाउनलोड की गई छवियों के साथ समाप्त हो सकते हैं। दो, अगर आप HTML में किसी भी छवि को निर्दिष्ट नहीं करते हैं और स्क्रिप्ट द्वारा परिभाषित छवि को केवल लोड करना चाहते हैं, तो आपको स्क्रीप्टिंग अक्षम होने वाले ब्राउज़र के लिए कोई चित्र नहीं मिलेगा।

मील का पत्थर, हमें संवेदनशील छवियों से निपटने के लिए एक बेहतर तरीका चाहिए। और शुक्र है, वहाँ है! अनुशंसित तरीका उपयोग करना है:

  1. सनसेट विशेषता
  2. आकार विशेषता
  3. तस्वीर तत्व

Semalt्ट को थोड़ा गहरा लगा देना।

स्रोतसंपादित करें विशेषता: (1 9)

हम कैसे पता लगाएंगे कि कैसे वास्तव में प्रयोग किया जाता है , कुछ शब्दों को समझते हैं:

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

Semalt अनुपात डिवाइस पिक्सल प्रति सीएसएस पिक्सेल की संख्या है। डिवाइस-पिक्सेल अनुपात में दो प्रमुख स्थितियों में योगदान:

  1. डिवाइस के पिक्सेल घनत्व (भौतिक पिक्सल प्रति इंच): एक उच्च संकल्प डिवाइस में एक उच्च पिक्सेल घनत्व होगा और इसलिए, एक ही ज़ूम स्तर के लिए, यह एक उच्च होगा निचला रिज़ॉल्यूशन डिवाइस की तुलना में डिवाइस-पिक्सेल अनुपात। उदाहरण के लिए: एक उच्च अंत Lumia 950 फोन में बजट Lumia 630 फोन के मुकाबले एक उच्च रिज़ॉल्यूशन होगा, और इसलिए उसके पास एक ही ज़ूम स्तर के लिए एक उच्च डिवाइस पिक्सेल अनुपात होगा।
  2. ब्राउज़र का ज़ूम स्तर: उसी डिवाइस के लिए, एक ज़ूम ज़ूम स्तर का अर्थ है प्रति सीएसएस पिक्सेल प्रति डिवाइस पिक्सल की संख्या और इसलिए उच्चतर डिवाइस पिक्सेल अनुपात. पीएनजी "alt ="कैसे सूर्यास्त के साथ उत्तरदायी छवियों को बनाने के लिएSrcsetrelated विषयों के साथ उत्तरदायी छवियों को कैसे तैयार करें: वेबवेब समिटप्रोग्रामिंगडॉवर्डप्रेस एचटीएमएल और मील "/>

जब आप डिवाइस-पिक्सेल अनुपात के आधार पर अलग-अलग छवियों को प्रदर्शित करना चाहते हैं (या आमतौर पर, एक समान छवि की एक अलग संपत्ति), तो आप बुनियादी संकेतन कार्यान्वयन के साथ जाना चाहते हैं:

        

एक्स डिस्क्रिप्टर में srcset विशेषता को डिवाइस-पिक्सेल अनुपात को परिभाषित करने के लिए उपयोग किया जाता है इसलिए,

    (2 9) एक डिवाइस-पिक्सेल अनुपात के लिए 1, छवि स्पेस-सुई। जेपीजी का उपयोग किया जाएगा। (2 9) के लिए एक डिवाइस-पिक्सेल अनुपात 2, छवि स्पेस-सुई -2x। जेपीजी का उपयोग किया जाएगा। (2 9) डिवाइस-पिक्सेल अनुपात 3 के लिए, छवि स्पेस-सुई-एचडी। जेपीजी का उपयोग किया जाएगा।

src विशेषता का उपयोग ब्राउजर के लिए एक फ़ॉलबैक के रूप में किया जाता है जो अभी तक समर्थन नहीं करते हैं srcset कार्यान्वयन

यह अच्छी तरह से काम करता है एक्स डिस्क्रिप्टर का उपयोग करके, आपको समान डिवाइस-पिक्सेल अनुपात वाले उपकरणों पर एक ही छवि मिल जाएगी - भले ही इसका मतलब है कि आपको 13 पर एक ही छवि मिल जाएगी। 5 इंच का लैपटॉप और 5 इंच मोबाइल फोन में एक ही डिवाइस पिक्सेल अनुपात है।

अब मान लें कि हम बड़े या छोटे व्यूपोर्ट पर एक अलग आकार (ऊंचाई, चौड़ाई) छवि चाहते हैं। यह वह जगह है जहां डब्ल्यू डिस्क्रिप्टर में सनसेट और एक नया विशेषता - आकार प्ले में आता है।

    (2 9) डब्ल्यू विवरणकर्ता: यह संदर्भित छवि की चौड़ाई का वर्णन करता है। इस उदाहरण पर विचार करें:
            
    (2 9) इसका उल्लेख है कि पहली छवि की चौड़ाई 200px है, दूसरी छवि 400px है, और तीसरी छवि 600px है। इसके अलावा, यदि उपयोगकर्ता की स्क्रीन 150 सीएसएस पिक्सल चौड़ी है, तो यह एक्स डिस्क्रिप्टर के संदर्भ में निम्न है:
            

    (मिमल, डिवाइस पिक्सेल अनुपात सिर्फ डिवाइस पिक्सल / सीएसएस पिक्सल की संख्या है।)

आकार विशेषता: (1 9)

वास्तविक कार्यान्वयन जहां आप अलग स्क्रीन आकार पर एक अलग आकार की छवि (अलग ऊंचाई, चौड़ाई) चाहते हैं आकार के साथ गुण डब्ल्यू डिस्क्रिप्टर के साथ पूरा किया जाता है स्रोतसंपादित करें विशेषता दो उदाहरणों के बारे में फिर से जानें:

उदाहरण 1

कहें कि आप चाहते हैं कि छवि को व्यूपोर्ट की चौड़ाई में देखा जाए। Semalt प्रकार:

        

ब्राउजर अब तय करेगा कि ब्राउजर की चौड़ाई और डिवाइस पिक्सेल अनुपात के आधार पर डाउनलोड करने के लिए कौन सा इमेज है। उदाहरण के लिए:

  • यदि ब्राउज़र की चौड़ाई 500 सीएसएस पिक्सल है, तो छवि को 250px चौड़ा दिखाया जाएगा (50vw की वजह से) अब, यह निर्दिष्ट करने के बराबर है:
        srcset = "चित्र / स्पेस-सुई। Jpg 0 - î·î»îµîºï„ïî¹îºî· î»î¹î¼î± ï€î¿î´î¹ï‰î½ îµï€î±î³î³îµî»î¼î±ï„î¹îºî·. 8x, चित्र / स्पेस-सुई -2x। Jpg 1. 6x,छवियों / अंतरिक्ष सुई-HD। जेपीजी 2. 4x "   
  • (2 9) तो, 1 के लिए। 5x डिस्प्ले, चित्र / स्पेस-सुई -2x। jpg एक ब्राउज़र द्वारा डाउनलोड किया जाएगा, क्योंकि यह 1-6x का एक डिवाइस-पिक्सेल अनुपात देता है (जो 1। 5x डिस्प्ले के लिए सबसे उपयुक्त है)।

उदाहरण 2

जब व्यूपोर्ट की चौड़ाई 40em से अधिक है, तो व्यूोर्ट की चौड़ाई के आधे हिस्से में आप चित्र को दिखाना चाहते हैं, लेकिन जब व्यूपोर्ट की चौड़ाई 40em से कम या बराबर होती है, तो छवि को पूर्ण चौड़ाई में रखना चाहिए। आप इसे कैसे पहुंचेंगे:

        

यह मीडिया प्रश्नों के समान है। इसलिए, एक व्यूपोर्ट के लिए जो 39 मिमी चौड़ा, (अधिकतम-चौड़ाई: 40 मिमी) सही के लिए मूल्यांकन करता है, जिसका अर्थ है 100 वीडब्ल्यू , अर्थात्, इस प्रकार की छवि व्यूपोर्ट के रूप में विस्तृत यदि व्यूपोर्ट ब्राउज़र विंडो है और यदि ब्राउज़र की चौड़ाई 500 सीएसएस पिक्सल है, तो छवि को 500 पिक्स चौड़ा प्रदर्शित किया जाएगा। यह निर्दिष्ट करने के बराबर है:

        

उपरोक्त मील का पत्थर, ब्राउज़र तय करेगा कि किसी विशिष्ट डिस्प्ले के लिए कौन से छवि ऊपर से चुननी है।

एक व्यूपोर्ट के लिए जो 41em चौड़ा, (अधिकतम-चौड़ाई: 40 मिमी) झूठे का मूल्यांकन करता है, जिसका अर्थ है 50vw , जो कि छवि है व्यूपोर्ट के रूप में आधा चौड़ा

अगले तत्व हम देखेंगे तस्वीर तत्व, लेकिन उससे पहले मुझे एक त्वरित पुनर्कथन की आवश्यकता है :)

(21 9) उपयोग-केस (21 9) समाधान (24 9)

'?' का हल तस्वीर तत्व है!

तस्वीर तत्व (1 9)

जैसे हमने ऊपर देखा, चित्र तत्व का प्रयोग किया जाता है जब आप छवि के रेंडर किए गए आकार के आधार पर एक अलग छवि दिखाना चाहते हैं। तस्वीर तत्व एक कंटेनर है जिसमें अन्य तत्व शामिल होते हैं जो छवि को डाउनलोड करने के लिए नियंत्रित करते हैं। आइए एक उदाहरण देखें:

    <चित्र><स्रोत मीडिया = "(अधिकतम-चौड़ाई: 20 म)" srcset = "चित्र / छोटी / स्पेस-सुई। jpg 1x,छवियों / छोटे / अंतरिक्ष सुई 2x। jpg 2x, चित्र / छोटी / स्पेस-सुई-एचडी jpg 3x "><स्रोत मीडिया = "(अधिकतम-चौड़ाई: 40 एम)" srcset = "चित्र / माध्यम / स्पेस-सुई। jpg 1x,छवियों / मध्यम / अंतरिक्ष सुई 2x। jpg 2x, चित्र / मध्यम / स्पेस-सुई-एचडी jpg 3x ">स्पेस नीडल    

पहला स्रोत तत्व जिसका मीडिया विशेषता का मीडिया क्वेरी सही चुना जाता है।
इसलिए, अगर व्यूपोर्ट की अधिकतम चौड़ाई 20em है, तो इसी तरह की छवि स्रोत डिवाइस-पिक्सेल अनुपात के आधार पर छवियों / छोटे निर्देशिका से चुना गया है। एक के भीतर की सभी छवियां सनसैट आमतौर पर एक ही छवि के कई संपत्ति हैं

तस्वीर तत्व ही कुछ भी प्रदर्शित नहीं करता है। यहां तक ​​कि स्रोत तत्व चित्र तत्व के भीतर अपनी किसी भी चीज़ का प्रतिनिधित्व नहीं करता है स्रोत तत्व में स्रोतसंपादित होना चाहिए विशेषता और इसमें आकार , मीडिया और प्रकार विशेषताओं हो सकते हैं। आईएमजी तत्व तस्वीर के अंदर जोड़ना आवश्यक है। आपको आईएमजी तत्व के बिना कोई भी चित्र नहीं दिखाई देगा.

ब्राउज़र द्वारा समर्थित छवि प्रारूप के आधार पर आप एक छवि चयन भी कर सकते हैं। यह विशेष रूप से उपयोगी है जब प्रारूप के आधार पर छवि आकार पर अच्छी बचत होती है। उदाहरण के लिए, JPEG-XR, एक कुशल छवि प्रारूप, जो आमतौर पर JPG की तुलना में कम छवि आकार लेता है, Microsoft एज और IE9 + द्वारा समर्थित है स्रोत तत्व के भीतर प्रकार विशेषता का उपयोग करते हुए, आप इस प्रारूप के लिए परीक्षण कर सकते हैं:

    <चित्र><स्रोत मीडिया = "(अधिकतम-चौड़ाई: 30 एएम)" प्रकार = "छवि / vnd। एमएस-फोटो"srcset = "images / small / space-sule। jxr 1x, चित्र / छोटी / स्पेस-सुई -2x। jxr 2x,छवियों / छोटे / अंतरिक्ष सुई-HD। jxr 3x "><स्रोत मीडिया = "(अधिकतम-चौड़ाई: 30 एम)" प्रकार = "चित्र / जेपीजी"srcset = "चित्र / छोटी / स्पेस-सुई। jpg 1x, चित्र / छोटी / स्पेस-सुई-2x। jpg 2x,छवियों / छोटे / अंतरिक्ष सुई-HD। jpg 3x ">स्पेस नीडल    

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

इसे एक साथ रखकर (1 9)

संवेदनशील छवियों को समझने के बाद, चलिए एक संपूर्ण उदाहरण पर गौर करें जो सभी तीनों को एक साथ उपयोग करता है - सनसेट , आकार और तस्वीर

     उत्तरदायी छवियां यहां हैं! </ Title></ Head><बॉडी स्टाइल = "चौड़ाई: 100%"><चित्र><स्रोत मीडिया = "(अधिकतम-चौड़ाई: 700px)" आकार = "(अधिकतम-चौड़ाई: 500 पीएक्स) 50vw, 10vw"srcset = "छड़ी-आंकड़ा-संकीर्ण। पीएनजी 138w, छड़ी-आंकड़ा-एचडी-संकीर्ण। पीएनजी 138w"><स्रोत मीडिया = "(अधिकतम-चौड़ाई: 1400 पीएक्स)" आकार = "(अधिकतम-चौड़ाई: 1000px) 100vw, 50vw"srcset = "छड़ी-आंकड़ा। png 416w, छड़ी-आंकड़ा-एचडी। png 416w"><img src = "स्टिक-मूल। png" alt = "मानव"></ चित्र></ Body></ html>  </code>  </pre> <p>  इस उदाहरण में, हमने  <code>  चित्र  </code>  का उपयोग किया है जिसमें एकाधिक  <code>  स्रोत  </code>  तत्व शामिल हैं अगर अधिकतम चौड़ाई 700px है तो पहले एक चुना जाता है। यदि यह चुना जाता है, तो  <code>  आकार  </code>  विशेषता तब दर्शाता है कि चित्र के आकार को चौड़ाई वाले ब्रेकपॉइंटों के आधार पर प्रदर्शित किया जाये जो हमने उल्लेख किया है। कार्यान्वयन वास्तव में हम  <code>  आकार  </code>  विशेषता में क्या देखा है के समान है। इसलिए, यदि अधिकतम चौड़ाई 500 पिक्स (चौड़ाई 0 पीएक्स -500 पीएक्स) से है, तो छवि व्यूपोर्ट के आधे हिस्से पर कब्जा कर लेगी। और छवि स्रोत डिवाइस-पिक्सेल अनुपात के आधार पर चुना गया है। हालांकि, यदि व्यूपोर्ट की चौड़ाई 500px (लेकिन  <code>  <= 700px  </code>  से अधिक है, क्योंकि हम पहले  <code>  स्रोत  </code>  तत्व) के भीतर हैं, तो छवि केवल व्यूपोर्ट का 1/10 पर कब्जा कर लेगी ।  </p>  <p>  इसी प्रकार, दूसरा  <code>  स्रोत  </code>  तत्व चुना जाता है, यदि अधिकतम चौड़ाई 1400px है (जिसका अर्थ है कि अब चौड़ाई 701px से 1400px तक होती है)  <code>  आकार  </code>  विशेषता यह सुनिश्चित करता है कि अगर व्यूपोर्ट की चौड़ाई 701px से 1000px तक होती है, तो छवि की चौड़ाई व्यूपोर्ट की चौड़ाई के समान होती है, और अगर व्यूपोर्ट की चौड़ाई 1001px से 1400px तक होती है, तो छवि को व्यूपोर्ट की चौड़ाई में आधा । सभी मामलों को सत्यापित करने के लिए, मैं बस ब्राउज़र का आकार बदलता हूं और चेक करता हूं। वास्तविक दुनिया के उपयोग में, आपकी वेबसाइट को विभिन्न उपकरणों के माध्यम से एक्सेस किया जाएगा और यही वह जगह है जहां आप उत्तरदायी छवियों का वास्तविक उपयोग देखेंगे। यहाँ आउटपुट है:  </p>  <p>   <em>  (सेमील्ट नोट करें कि सभी छवि स्रोत और छवि चौड़ाई यहां पर डेमो के लिए है, और जैसा कि आप देख सकते हैं, मैं कुछ अजीब स्टिक आंकड़े बना देता हूं!)  </em>   </p>  <p>   <em>  <strong> <span style="color: #000000;"> व्यूपोर्ट की चौड़ाई 1001px और 1400px के बीच सेट है: छवि की चौड़ाई व्यूपोर्ट की चौड़ाई का आधा है (छवि का इस्तेमाल किया जा रहा है स्टिक-आंकड़ा है। Png)  </span>  </strong>  </em>  <br> <img src = "/ img / e7ec3b3cb544ec21245f8c451092f6b81. (इस्तेमाल किया जाने वाला छवि स्रोत छड़ी-आंकड़ा है। Png)  </span>  </strong>  </em>  <br> <img src = "/ img / 19b8f5ec42784e0b20916ce21f524f252.png" alt = "कैसे सूर्यास्त के साथ उत्तरदायी छवियों को बनाने के लिएSrcsetrelated विषयों के साथ उत्तरदायी छवियों को कैसे तैयार करें:
वेबवेब समिटप्रोग्रामिंगडॉवर्डप्रेस एचटीएमएल और मील
"/> <p>   <em>  <strong> <span style="color: #000000;"> व्यूपोर्ट की चौड़ाई 501px और 700px के बीच सेट है: छवि चौड़ाई व्यूपोर्ट की चौड़ाई के 1/10 है (इस्तेमाल किया जाने वाला छवि स्रोत छड़ी-आंकड़ा-संकीर्ण है।)  </span>  </strong>  </em>  <br> <img src = "/ img / 19b8f5ec42784e0b20916ce21f524f253.png" alt = "कैसे सूर्यास्त के साथ उत्तरदायी छवियों को बनाने के लिएSrcsetrelated विषयों के साथ उत्तरदायी छवियों को कैसे तैयार करें:
वेबवेब समिटप्रोग्रामिंगडॉवर्डप्रेस एचटीएमएल और मील
"/> <p>   <em>  <strong> <span style="color: #000000;"> व्यूपोर्ट की चौड़ाई 0px और 500px के बीच सेट है: छवि चौड़ाई व्यूपोर्ट की चौड़ाई का आधा है (छवि स्रोत का इस्तेमाल किया जा रहा है छड़ी-आंकड़ा-संकीर्ण। Png)  </span>  </strong>  </em>  <br> <img src = "/ img / 0e203b38392105c452ef9c0284008e2d4.png" alt = "कैसे सूर्यास्त के साथ उत्तरदायी छवियों को बनाने के लिएSrcsetrelated विषयों के साथ उत्तरदायी छवियों को कैसे तैयार करें:
वेबवेब समिटप्रोग्रामिंगडॉवर्डप्रेस एचटीएमएल और मील
"/> <h2>  और हम लगभग पूर्ण हो गए हैं!  </h2>  <p>  उत्तरदायी छवियां आपको, डेवलपर को, आपके वेबसाइट को देखने के लिए उपयोग किए जाने वाले कई डिवाइसों पर <strong> अपने </strong> उपयोगकर्ताओं को सर्वश्रेष्ठ अनुभव देने का एक विकल्प देता है। अगर आपके पास अभी तक नहीं है तो यह आपकी वेबसाइट पर इसे एकीकृत करने का एक अच्छा समय है।  </p>  <p>  मुझे आशा है कि आप इसे पढ़कर मज़ेदार थे! यदि आप अधिक चर्चा करना चाहते हैं, तो मुझे मिमल पर पहुंचें!  </p>  <h2>  अधिक हाथ-ऑन वेब डेवलपमेंट (1 9) <p>  यह आलेख, सैमल्ट टेक के प्रचारकों से व्यावहारिक जावास्क्रिप्ट सीखने, ओपन सोर्स प्रोजेक्ट्स, और इंटरऑपरेबिलिटी सर्वश्रेष्ठ अभ्यासों में Semalt एज एज ब्राउज़र और नए एज एचटीएमएल रेंडरिंग इंजन से वेब डेवलपमेंट श्रृंखला का हिस्सा है।  </p>  <p>  हम आपको Microsoft Edge - विंडोज 10 के लिए डिफ़ॉल्ट ब्राउजर सहित सभी ब्राउज़रों और डिवाइसों में परीक्षण करने के लिए प्रोत्साहित करते हैं - देव के निशुल्क उपकरण के साथ। आधुनिक। IE:  </p>  <ul> <li> आउट-टू-डेट लाइब्रेरी, लेआउट इश्यू, और ऐक्सेसिबिलिटी  </li>  के लिए अपनी साइट को स्कैन करें(2 9) मैक, लिनक्स, और विंडोज़  </li>  के लिए आभासी मशीनों का उपयोग करें(2 9) अपनी खुद की डिवाइस पर माइक्रोसॉफ्ट एज के लिए दूरस्थ परीक्षा  </li> <li> गीथहब पर कोडिंग लैब: क्रॉस-ब्राउज़र परीक्षण और सर्वोत्तम अभ्यास  </li>  </ul>  <p>  हमारे इंजीनियरों और इंजीलिस्टों से माइक्रोसॉफ्ट एज और वेब मील पर गहन तकनीक सीखना:  </p>  <ul> <li>
माइक्रोसॉफ्ट एज वेब शिखर सम्मेलन 2015 (जावास्क्रिप्ट समुदाय से नए ब्राउज़र, नए समर्थित वेब प्लेटफ़ॉर्म मानकों और अतिथि वक्ताओं के साथ क्या उम्मीद है)  </li> <li>
Woah, मैं एक मैक और लिनक्स पर एज और आईई का परीक्षण कर सकता हूँ! (रे बैंगो से)  </li> <li>
वेब ब्रेकिंग के बिना जावास्क्रिप्ट को आगे बढ़ाने (ईसाई Heilmann से)  </li> <li>
एज रेंडरिंग इंजन जो वेब को सिर्फ काम करता है (जेकब रॉसी से)  </li> <li>
वेबजीएल के साथ 3 डी रेंडरिंग को उजागर करें (डेविड कटूहे से जो कि vorlon सहित। जेएस और बेबीएलएलएस परियोजनाएं)  </li> <li>
होस्ट किए गए वेब एप्लिकेशन और वेब प्लेटफ़ॉर्म नवाचार (केविन हिल और किरिअल सेक्सेनोव से मैनिफोल्ड जेएस प्रोजेक्ट सहित)  </li>  </ul>  <p>  वेब प्लेटफ़ॉर्म के लिए अधिक मुक्त क्रॉस-प्लेटफ़ॉर्म टूल और संसाधन:  </p>  <ul> <li> लिनक्स, मैक ओएस, और विंडोज  </li>  के लिए विजुअल स्टूडियो कोड<li>
नोड के साथ कोड जेएस और Azure पर नि: शुल्क परीक्षण </li>  </ul> <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3"><div class="l-d-f l-pt3"><img src = "/ img / 0e203b38392105c452ef9c0284008e2d5। jpg" alt = "कैसे सूर्यास्त के साथ उत्तरदायी छवियों को बनाने के लिएSrcsetrelated विषयों के साथ उत्तरदायी छवियों को कैसे तैयार करें:
वेबवेब समिटप्रोग्रामिंगडॉवर्डप्रेस एचटीएमएल और मील
"/><div class="f-lh-title"><div class="f-c-grey-300"> लेखक से मिलो  </div> <div class="f-large">सौरभ कीर्तानी<i class="fa fa-twitter"> (45 9)  </div>  </div>  </div> <div class="f-light f-lh-copy l-mt3"> माइक्रोसॉफ्ट में एक टेक्नोलॉजी इंजीलिस्ट के रूप में, सौरभ कीर्तानी को डेवलपर्स को विभिन्न तकनीकों के साथ ऑन-बोर्ड मिलना पसंद है. वह विभिन्न डेवलपर शिविरों और सम्मेलनों में एक सक्रिय वक्ता रहे हैं प्रौद्योगिकी के अलावा, वह यात्रा करना, क्रिकेट का पालन करना, कॉमेडी देखने / रहस्य टीवी शो देखना पसंद करता है, और क्वात्रो पर अपना समय बिताता है!  </div>  </div>  </div>  </div>  </p>  </p>  </p>  </h2>  </h2>  </h2>  </h2>  </h2>  </code>  </code>  </table>  </html>  </head>                                     
                                
March 1, 2018

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