उत्तरदायी डिजाइन। हल्की प्रतिक्रिया

हाल ही में, अधिक से अधिक मोबाइल डिवाइस दिखाई दिए हैं जो न केवल रोशनी को निर्धारित करते हैं, बल्कि स्क्रीन पर प्रदर्शित जानकारी को और अधिक सुविधाजनक और पठनीय रूप में बदल देते हैं।

अब यह फीचर धीरे-धीरे मोबाइल ब्राउजर के इंजन में जा रहा है।

लेख एक उदाहरण पर विचार करेगा कि कैसे एक ब्राउज़र में एक वेब पेज परिवेश प्रकाश का जवाब देता है।

परिवेश प्रकाश घटनाएँ एपीआई

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

प्रकाश की घटनाएँ

जब ब्राउजर लाइट लेवल में बदलाव का पता लगाता है तो ब्राउजर डिवाइसलाइट इवेंट को फायर करता है। हम इसे पकड़ लेंगे। घटना में, ब्राउज़र सेंसर से प्रेषित प्रकाश स्तर को भी प्रसारित करता है।

window.addEventListener('devicelight', function(event) { console.log(event.value + 'lux'); }); 

अब, जब प्रकाश बदलता है, तो कंसोल को वर्तमान स्तर के बारे में जानकारी मिलेगी।

प्रकाश का जवाब देने के लिए एक पृष्ठ सीखना।

संभावनाओं को प्रदर्शित करने के लिए, हम तीन पृष्ठ शैलियों का उपयोग करेंगे, जिन्हें प्रकाश के आधार पर वांछित के साथ बदल दिया जाएगा:

• मध्यम रोशनी में - एक ग्रे बैकग्राउंड, डार्क टेक्स्ट (स्टैंडर्ड पेज डिस्प्ले, रोशनी के बारे में जानकारी के अभाव में)
• उच्च प्रकाश में - सफेद पृष्ठभूमि, गहरा पाठ
• कम रोशनी में - डार्क बैकग्राउंड, लाइट टेक्स्ट

हम आवश्यक जावास्क्रिप्ट कोड लिखेंगे:

 window.addEventListener('devicelight', function(e) { var lux = e.value; if(lux < 50) { document.body.className = 'dark'; } if(lux >= 50 && lux <= 300) { document.body.className = 'normal'; } if(lux > 300) { document.body.className = 'bright'; } }); 

और पेज के लिए इसी शैली:

 body, body.normal { background-color: #ddd; color: #111; } body.dark{ background-color: #444; color: #fff; } body.bright { background-color: #fff; color: #333; } 

डेमो देखें


फिलहाल, यह सुविधा केवल फ़ायरफ़ॉक्स 22+ में समर्थित है, डिवाइस पर एक लाइट सेंसर भी होना चाहिए।
पेज को Lenovo P780, Nexus 5, Nexus 7 डिवाइसों पर Firefox में परीक्षण किया गया था।

पृष्ठ इन उपकरणों पर थोड़ा अलग तरीके से व्यवहार करता है, जाहिरा तौर पर सेंसर की अलग संवेदनशीलता के कारण।

W3C ने CSS मीडिया क्वेरी 4 में प्रकाश परिभाषाओं को चमकदार पैरामीटर के माध्यम से जोड़ने का वादा किया, अर्थात। उपरोक्त उदाहरण में निम्न रूप होगा:

 @media screen and (luminosity: normal) { body {background-color: #ddd; color: #111;} } @media screen and (luminosity: dim) { body {background-color: #444; color: #fff;} } @media screen and (luminosity: washed) { body {background-color: #fff; color: #333;} } 

लेकिन फिलहाल, दस्तावेज़ अभी भी मसौदा चरण में है। हम इस सुविधा के लिए समर्थन की आधिकारिक घोषणा की प्रतीक्षा करेंगे।

UPD : उपयोगकर्ता के अनुरोध पर ange007 ने एक समर्थित डिवाइस के बिना उदाहरण के सुविधाजनक देखने के लिए, पृष्ठ पर एक ट्रैकबार जोड़ा। मोबाइल उपकरणों पर त्वरित देखने के लिए एक QR कोड भी जोड़ा।