ज़्यादातर ब्राउज़र में, फ़ुलस्क्रीन या कीऑस्क मोड में जाने की सुविधा पहले से ही मौजूद है. आम तौर पर, ब्राउज़र का Chrome यूज़र इंटरफ़ेस (यूआई) हट जाता है और कॉन्टेंट दिखने लगता है. Chrome वेब स्टोर से इंस्टॉल किए गए ऐप्लिकेशन के लिए, उपयोगकर्ताओं के पास यह भी विकल्प होता है कि वे किसी ऐप्लिकेशन को मैन्युअल तरीके से कॉन्फ़िगर कर सकें, ताकि उसे नए टैब पेज से खोलने पर वह फ़ुलस्क्रीन मोड में चल सके. मैन्युअल फ़ुलस्क्रीन मोड अच्छा है. प्रोग्रामैटिक फ़ुलस्क्रीन बेहतर है!
Fullscreen API की मदद से, वेब ऐप्लिकेशन, पेज पर मौजूद किसी भी कॉन्टेंट को प्रोग्राम के हिसाब से, JavaScript से ब्राउज़र के फ़ुलस्क्रीन व्यू मोड में ले जा सकते हैं. इसका मतलब है कि WebGL और <canvas> गेम अब पूरी तरह से इमर्सिव हो सकते हैं. वीडियो, सिल्वर स्क्रीन की तरह लग सकते हैं, और ऑनलाइन पत्रिकाएं असल लग सकती हैं. मुझे ब्राउज़र पसंद है, लेकिन हमें इसकी सीमाओं से बंधे नहीं रहना चाहिए :)
अगर आपको जानकारी नहीं चाहिए, तो यहां डेमो देखें:
तो एपीआई कैसे काम करता है? उदाहरण के लिए, अगर आपको फ़ुल स्क्रीन मोड में जाना है, तो <div> को यह कहें:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
इसके बाद, फ़ुलस्क्रीन मोड से बाहर निकलने के लिए, document एक तरीका दिखाता है:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
फ़ुल-स्क्रीन मोड में, कॉन्टेंट ब्राउज़र के व्यूपोर्ट के बीच में दिखता है. डेवलपर के पास यह तय करने का विकल्प होता है कि कॉन्टेंट को देखने के लिए सबसे सही तरीके से उसे किस तरह स्टाइल किया जाए. आम तौर पर, आपके <div> को पूरी स्क्रीन पर दिखाया जाना चाहिए. अच्छी बात यह है कि एपीआई में इसके लिए नए सीएसएस स्यूडो-सिलेक्टर शामिल हैं:
div:-webkit-full-screen {
width: 100% !important;
}
div:-moz-full-screen {
width: 100% !important;
}
div:-ms-fullscreen {
width: 100% !important;
}
div:fullscreen {
width: 100% !important;
}
/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
display: none;
}
:-moz-full-screen .tohide {
display: none;
}
:-ms-fullscreen .tohide {
display: none;
}
:fullscreen .tohide {
display: none;
}
सीएसएस के स्यूडो-सिलेक्टर की मदद से, फ़ुलस्क्रीन कॉन्टेंट को अपनी पसंद के मुताबिक स्टाइल करना बहुत आसान हो जाता है.
Chrome 15, FF 14, IE 11, और Opera 12.1 में, फ़ुलस्क्रीन एपीआई डिफ़ॉल्ट रूप से चालू होता है. बाकी एपीआई के बारे में ज़्यादा जानकारी के लिए, स्पेसिफ़िकेशन देखें.
11-10-2012 को अपडेट किया गया: स्पेसिफ़िकेशन में हुए बदलावों के हिसाब से. requestFullscreen() में "S" को छोटा किया और document.webkitCancelFullScreen() को document.webkitExitFullscreen() में बदला. ब्राउज़र के साथ काम करने की सुविधा के बारे में अपडेट की गई टिप्पणी.
11-02-2014 को अपडेट किया गया: IE के लिए प्रीफ़िक्स शामिल करने के लिए, स्टैंडर्ड सीएसएस सिंटैक्स जोड़ें और ब्राउज़र के साथ काम करने की जानकारी वाली टिप्पणी अपडेट करें. @dstorey और @patrickkettner को धन्यवाद.