फ़िलहाल, ज़्यादातर ब्राउज़र में फ़ुलस्क्रीन या कीऑस्क मोड में जाने की सुविधा उपलब्ध होती है. दरअसल, इसमें ब्राउज़र का chrome यूज़र इंटरफ़ेस (यूआई) दिख जाता है और कॉन्टेंट उस जगह पर पहुंच जाता है. Chrome Web Store से इंस्टॉल किए गए ऐप्लिकेशन के लिए, उपयोगकर्ताओं के लिए नए टैब पेज से किसी ऐप्लिकेशन को खोलने पर उसे मैन्युअल रूप से कॉन्फ़िगर भी किया जा सकता है, ताकि वह फ़ुलस्क्रीन मोड में चल सके. मैन्युअल तरीके से फ़ुलस्क्रीन मोड में वीडियो दिखाना बेहतर है. प्रोग्रामैटिक फ़ुल स्क्रीन का इस्तेमाल करना बेहतर होता है!
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 में, Fullscreen API को डिफ़ॉल्ट रूप से चालू किया जाता है. बाकी एपीआई के बारे में ज़्यादा जानकारी के लिए, खास जानकारी देखें.
11-10-2012 को अपडेट किया गया: खास जानकारी में किए गए बदलावों के मुताबिक होने के लिए. requestFullscreen() के "S" को छोटा किया और document.webkitCancelFullScreen() को बदलकर document.webkitExitFullscreen() किया. ब्राउज़र के साथ काम करने से जुड़ी टिप्पणी अपडेट की गई.
11-02-2014 को अपडेट किया गया: IE में प्रीफ़िक्स शामिल करने के लिए, स्टैंडर्ड सीएसएस सिंटैक्स जोड़ें और ब्राउज़र के साथ काम करने से जुड़ी टिप्पणी को अपडेट करें. धन्यवाद @dstorey और @patrickkettner.