हमारे पास आसानी से इमर्सिव फ़ुलस्क्रीन वेबसाइटें और ऐप्लिकेशन बनाने की सुविधा है. हालांकि, वेब पर किसी भी चीज़ की तरह, इसे करने के कुछ तरीके हैं. यह खास तौर पर तब ज़रूरी है, जब ज़्यादा ब्राउज़र "इंस्टॉल किए गए वेब ऐप्लिकेशन" के अनुभव के साथ काम कर रहे हैं, जो फ़ुलस्क्रीन में लॉन्च होते हैं.
अपने ऐप्लिकेशन या साइट को फ़ुल स्क्रीन मोड में देखना
उपयोगकर्ता या डेवलपर, वेब ऐप्लिकेशन को फ़ुलस्क्रीन मोड में कई तरीकों से देख सकते हैं.
- उपयोगकर्ता के जेस्चर के जवाब में, ब्राउज़र को फ़ुलस्क्रीन पर जाने का अनुरोध करें.
- ऐप्लिकेशन को होम स्क्रीन पर इंस्टॉल करें.
- पता बार को छिपाएं: पता बार को अपने-आप छिपने की सुविधा चालू करें.
उपयोगकर्ता के जेस्चर के जवाब में, ब्राउज़र को फ़ुलस्क्रीन पर जाने का अनुरोध करना
सभी प्लैटफ़ॉर्म एक जैसे नहीं होते. iOS Safari में फ़ुलस्क्रीन एपीआई नहीं होता. हालांकि, Android पर Chrome, Firefox, और IE 11+ में यह एपीआई होता है. आपके बनाए गए ज़्यादातर ऐप्लिकेशन, फ़ुलस्क्रीन स्पेसिफ़िकेशन से मिले JS API और CSS सिलेक्टर के कॉम्बिनेशन का इस्तेमाल करेंगे. फ़ुलस्क्रीन अनुभव बनाते समय, आपको इन मुख्य JS API का ध्यान रखना होगा:
element.requestFullscreen()
(फ़िलहाल, Chrome, Firefox, और IE में प्रीफ़िक्स के तौर पर इस्तेमाल किया जाता है) एलिमेंट को फ़ुलस्क्रीन मोड में दिखाता है.document.exitFullscreen()
(फ़िलहाल, Chrome, Firefox, और IE में प्रीफ़िक्स के तौर पर इस्तेमाल किया जा रहा है. Firefox,cancelFullScreen()
का इस्तेमाल करता है) फ़ुलस्क्रीन मोड को बंद कर देता है.document.fullscreenElement
(फ़िलहाल, Chrome, Firefox, और IE में प्रीफ़िक्स है) अगर कोई भी एलिमेंट फ़ुलस्क्रीन मोड में है, तो यह सही दिखाता है.
जब आपका ऐप्लिकेशन फ़ुलस्क्रीन मोड में होता है, तो आपके पास ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) के कंट्रोल उपलब्ध नहीं होते. इससे, उपयोगकर्ताओं के आपके प्रॉडक्ट के साथ इंटरैक्ट करने के तरीके में बदलाव होता है. इनमें आगे और पीछे जाने जैसे स्टैंडर्ड नेविगेशन कंट्रोल नहीं होते. साथ ही, इनमें'रीफ़्रेश करें' बटन भी नहीं होता. इस स्थिति को ध्यान में रखना ज़रूरी है. ब्राउज़र के फ़ुलस्क्रीन मोड में जाने पर, अपनी साइट की स्टाइल और प्रज़ेंटेशन में बदलाव करने के लिए, कुछ सीएसएस सिलेक्टर का इस्तेमाल किया जा सकता है.
<button id="goFS">Go fullscreen</button>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
document.body.requestFullscreen();
},
false,
);
</script>
ऊपर दिया गया उदाहरण थोड़ा बनावटी है. मैंने वेंडर प्रीफ़िक्स के इस्तेमाल से जुड़ी सभी जटिलताओं को छिपा दिया है.
असल कोड बहुत ज़्यादा जटिल होता है. Mozilla ने एक बहुत ही काम की स्क्रिप्ट बनाई है. इसका इस्तेमाल करके, फ़ुलस्क्रीन मोड को टॉगल किया जा सकता है. जैसा कि आप देख सकते हैं, तय किए गए एपीआई की तुलना में, वेंडर प्रीफ़िक्स की स्थिति जटिल और मुश्किल है. यहां दिए गए कोड को थोड़ा आसान बनाने के बावजूद, यह अब भी मुश्किल है.
function toggleFullScreen() {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen =
docEl.requestFullscreen ||
docEl.mozRequestFullScreen ||
docEl.webkitRequestFullScreen ||
docEl.msRequestFullscreen;
var cancelFullScreen =
doc.exitFullscreen ||
doc.mozCancelFullScreen ||
doc.webkitExitFullscreen ||
doc.msExitFullscreen;
if (
!doc.fullscreenElement &&
!doc.mozFullScreenElement &&
!doc.webkitFullscreenElement &&
!doc.msFullscreenElement
) {
requestFullScreen.call(docEl);
} else {
cancelFullScreen.call(doc);
}
}
हम वेब डेवलपर, मुश्किल कामों से नफ़रत करते हैं. Sindre Sorhus' Screenfull.js मॉड्यूल, एक अच्छा हाई-लेवल एब्स्ट्रैक्ट एपीआई है. इसका इस्तेमाल किया जा सकता है. यह दो अलग-अलग जेएस एपीआई और वेंडर प्रीफ़िक्स को एक ही एपीआई में एक साथ जोड़ता है.
Fullscreen API के बारे में सलाह
दस्तावेज़ को फ़ुलस्क्रीन पर दिखाना
यह सोचना स्वाभाविक है कि आपने बॉडी एलिमेंट को फ़ुलस्क्रीन पर सेट किया है. हालांकि, अगर आपके पास WebKit या Blink पर आधारित रेंडरिंग इंजन है, तो आपको पता चलेगा कि इसका असर बॉडी की चौड़ाई पर पड़ा है. यह चौड़ाई, कॉन्टेंट को दिखाने के लिए ज़रूरी सबसे छोटे साइज़ तक सिकुड़ गई है. (Mozilla Gecko ठीक है.)
इसे ठीक करने के लिए, बॉडी एलिमेंट के बजाय दस्तावेज़ एलिमेंट का इस्तेमाल करें:
document.documentElement.requestFullscreen();
वीडियो एलिमेंट को फ़ुलस्क्रीन मोड में दिखाना
किसी वीडियो एलिमेंट को फ़ुल स्क्रीन मोड में देखने का तरीका, किसी दूसरे एलिमेंट को फ़ुल स्क्रीन मोड में देखने के तरीके से बिलकुल मेल खाता है. वीडियो एलिमेंट पर requestFullscreen
का इस्तेमाल करें.
<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
var videoElement = document.getElementById('videoElement');
videoElement.requestFullscreen();
},
false,
);
</script>
अगर आपके <video>
एलिमेंट में कंट्रोल एट्रिब्यूट की वैल्यू नहीं दी गई है, तो उपयोगकर्ता के पास फ़ुलस्क्रीन मोड में वीडियो को कंट्रोल करने का कोई विकल्प नहीं होगा. ऐसा करने का सुझाया गया तरीका यह है कि आप एक बुनियादी कंटेनर बनाएं. इसमें वीडियो और उन कंट्रोल को शामिल करें जिन्हें आपको उपयोगकर्ता को दिखाना है.
<div id="container">
<video></video>
<div>
<button>Play</button>
<button>Stop</button>
<button id="goFS">Go fullscreen</button>
</div>
</div>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
var container = document.getElementById('container');
container.requestFullscreen();
},
false,
);
</script>
इससे आपको ज़्यादा सुविधाएं मिलती हैं, क्योंकि आपके पास कंटेनर ऑब्जेक्ट को सीएसएस स्यूडो सिलेक्टर के साथ जोड़ने का विकल्प होता है. उदाहरण के लिए, "goFS" बटन को छिपाने के लिए.
<style>
#goFS:-webkit-full-screen #goFS {
display: none;
}
#goFS:-moz-full-screen #goFS {
display: none;
}
#goFS:-ms-fullscreen #goFS {
display: none;
}
#goFS:fullscreen #goFS {
display: none;
}
</style>
इन पैटर्न का इस्तेमाल करके, यह पता लगाया जा सकता है कि फ़ुल स्क्रीन मोड कब चालू है. साथ ही, अपने यूज़र इंटरफ़ेस को सही तरीके से अडजस्ट किया जा सकता है. उदाहरण के लिए:
- शुरुआती पेज पर वापस जाने का लिंक देकर
- डायलॉग बॉक्स बंद करने या पीछे जाने का तरीका उपलब्ध कराना
होम स्क्रीन से किसी पेज को फ़ुल-स्क्रीन मोड में लॉन्च करना
जब उपयोगकर्ता किसी वेब पेज पर जाता है, तो उसे फ़ुलस्क्रीन मोड में नहीं खोला जा सकता. ब्राउज़र वेंडर इस बात से अच्छी तरह वाकिफ़ हैं कि हर पेज लोड होने पर फ़ुलस्क्रीन मोड का इस्तेमाल करना बहुत परेशानी भरा होता है. इसलिए, फ़ुलस्क्रीन मोड में जाने के लिए उपयोगकर्ता के जेस्चर की ज़रूरत होती है. हालांकि, वेंडर उपयोगकर्ताओं को ऐप्लिकेशन "इंस्टॉल" करने की अनुमति देते हैं. इंस्टॉल करने की प्रोसेस, ऑपरेटिंग सिस्टम के लिए एक सिग्नल होती है कि उपयोगकर्ता, प्लैटफ़ॉर्म पर ऐप्लिकेशन के तौर पर इसे लॉन्च करना चाहता है.
मेटा टैग या मेनिफ़ेस्ट फ़ाइलों का इस्तेमाल करके, इसे सभी मुख्य मोबाइल प्लैटफ़ॉर्म पर लागू करना बहुत आसान है. इसके लिए, यह तरीका अपनाएं.
iOS
iPhone के लॉन्च होने के बाद से, उपयोगकर्ता होम स्क्रीन पर वेब ऐप्लिकेशन इंस्टॉल कर सकते हैं और उन्हें फ़ुल-स्क्रीन वेब ऐप्लिकेशन के तौर पर लॉन्च कर सकते हैं.
<meta name="apple-mobile-web-app-capable" content="yes" />
अगर कॉन्टेंट को 'हां' पर सेट किया गया है, तो वेब ऐप्लिकेशन फ़ुल-स्क्रीन मोड में चलता है. अगर कॉन्टेंट को 'नहीं' पर सेट किया गया है, तो वेब ऐप्लिकेशन फ़ुल-स्क्रीन मोड में नहीं चलता. डिफ़ॉल्ट रूप से, वेब कॉन्टेंट दिखाने के लिए Safari का इस्तेमाल किया जाता है. window.navigator.standalone रीड-ओनली बूलियन JavaScript प्रॉपर्टी का इस्तेमाल करके, यह पता लगाया जा सकता है कि कोई वेबपेज फ़ुल-स्क्रीन मोड में दिख रहा है या नहीं.
Apple
Android के लिए Chrome
Chrome की टीम ने हाल ही में एक सुविधा लागू की है. इससे, जब उपयोगकर्ता किसी पेज को होम स्क्रीन पर जोड़ता है, तो ब्राउज़र उस पेज को फ़ुलस्क्रीन में खोलता है. यह iOS Safari मॉडल से मिलता-जुलता है.
<meta name="mobile-web-app-capable" content="yes" />
अपने वेब ऐप्लिकेशन को इस तरह सेट अप किया जा सकता है कि डिवाइस की होम स्क्रीन पर ऐप्लिकेशन का शॉर्टकट आइकॉन जोड़ा जा सके. साथ ही, Android के लिए Chrome के "होम स्क्रीन पर जोड़ें" मेन्यू आइटम का इस्तेमाल करके, ऐप्लिकेशन को फ़ुल-स्क्रीन "ऐप्लिकेशन मोड" में लॉन्च किया जा सके.
Google Chrome
वेब ऐप्लिकेशन मेनिफ़ेस्ट का इस्तेमाल करना बेहतर विकल्प है.
वेब ऐप्लिकेशन मेनिफ़ेस्ट (Chrome, Opera, Firefox, Samsung)
वेब ऐप्लिकेशन के लिए मेनिफ़ेस्ट एक सामान्य JSON फ़ाइल होती है. इससे डेवलपर को यह कंट्रोल करने की सुविधा मिलती है कि उपयोगकर्ता को आपका ऐप्लिकेशन उन जगहों पर कैसा दिखे जहां उन्हें ऐप्लिकेशन दिखने चाहिए. उदाहरण के लिए, मोबाइल की होम स्क्रीन. साथ ही, यह भी कंट्रोल किया जा सकता है कि उपयोगकर्ता ऐप्लिकेशन को कैसे लॉन्च कर सकता है. आने वाले समय में, मेनिफ़ेस्ट की मदद से आपको अपने ऐप्लिकेशन पर ज़्यादा कंट्रोल मिलेगा. हालांकि, फ़िलहाल हम सिर्फ़ इस बात पर फ़ोकस कर रहे हैं कि आपका ऐप्लिकेशन कैसे लॉन्च किया जा सकता है. खास तौर पर:
- ब्राउज़र को अपने मेनिफ़ेस्ट के बारे में बताना
- लॉन्च करने का तरीका बताना
मेनिफ़ेस्ट बनाने और उसे अपनी साइट पर होस्ट करने के बाद, आपको अपने ऐप्लिकेशन वाले सभी पेजों से लिंक टैग जोड़ना होगा. इसके लिए, यह तरीका अपनाएं:
<link rel="manifest" href="/manifest.json" />
Chrome, Android के लिए 38 वर्शन (अक्टूबर 2014) से मेनिफ़ेस्ट के साथ काम करता है. इससे आपको यह कंट्रोल करने की सुविधा मिलती है कि होम स्क्रीन पर इंस्टॉल होने के बाद आपका वेब ऐप्लिकेशन कैसा दिखे. इसके लिए, short_name
, name
, और icons
प्रॉपर्टी का इस्तेमाल किया जाता है. साथ ही, यह भी कंट्रोल किया जा सकता है कि उपयोगकर्ता लॉन्च आइकॉन पर क्लिक करने पर, ऐप्लिकेशन को कैसे लॉन्च किया जाए. इसके लिए, start_url
, display
, और orientation
प्रॉपर्टी का इस्तेमाल किया जाता है.
मेनिफ़ेस्ट का उदाहरण नीचे दिया गया है. इसमें वह सब कुछ नहीं दिखता जो मेनिफ़ेस्ट में हो सकता है.
{
"short_name": "Kinlan's Amaze App",
"name": "Kinlan's Amazing Application ++",
"icons": [
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "landscape"
}
यह सुविधा पूरी तरह से प्रोग्रेसिव है. इसकी मदद से, इस सुविधा के साथ काम करने वाले ब्राउज़र के उपयोगकर्ताओं के लिए बेहतर और बेहतर तरीके से इंटिग्रेट किया गया अनुभव बनाया जा सकता है.
जब कोई उपयोगकर्ता आपकी साइट या ऐप्लिकेशन को होम स्क्रीन पर जोड़ता है, तो इसका मतलब है कि वह उसे ऐप्लिकेशन की तरह इस्तेमाल करना चाहता है. इसका मतलब है कि आपको उपयोगकर्ता को प्रॉडक्ट के लैंडिंग पेज के बजाय, अपने ऐप्लिकेशन के फ़ंक्शन पर ले जाना चाहिए. उदाहरण के लिए, अगर उपयोगकर्ता को आपके ऐप्लिकेशन में साइन-इन करना ज़रूरी है, तो उसे लॉन्च करने के लिए यह एक अच्छा पेज है.
काम के ऐप्लिकेशन
ज़्यादातर काम के ऐप्लिकेशन को तुरंत इसका फ़ायदा मिलेगा. ऐसे ऐप्लिकेशन के लिए, आपको उन्हें मोबाइल प्लैटफ़ॉर्म पर हर दूसरे ऐप्लिकेशन की तरह स्टैंडअलोन तौर पर लॉन्च करना होगा. किसी ऐप्लिकेशन को स्टैंडअलोन के तौर पर लॉन्च करने के लिए, वेब ऐप्लिकेशन मेनिफ़ेस्ट में यह जोड़ें:
"display": "standalone"
गेम
ज़्यादातर गेम को मेनिफ़ेस्ट से तुरंत फ़ायदा मिलेगा. ज़्यादातर गेम, फ़ुल स्क्रीन में लॉन्च होने के साथ-साथ, किसी खास ओरिएंटेशन में भी चलने चाहिए.
अगर आपको वर्टिकल स्क्रोलर या Flappy Birds जैसा गेम डेवलप करना है, तो हो सकता है कि आपका गेम हमेशा पोर्ट्रेट मोड में रहे.
"display": "fullscreen",
"orientation": "portrait"
दूसरी ओर, अगर आपको X-Com जैसा कोई पहेली वाला गेम या गेम बनाना है, तो हो सकता है कि आप चाहें कि गेम हमेशा लैंडस्केप ओरिएंटेशन का इस्तेमाल करे.
"display": "fullscreen",
"orientation": "landscape"
खबरों वाली साइटें
ज़्यादातर मामलों में, खबरें देने वाली साइटों पर सिर्फ़ कॉन्टेंट ही मौजूद होता है. ज़्यादातर डेवलपर, किसी समाचार साइट में मेनिफ़ेस्ट जोड़ने के बारे में सोचते ही नहीं हैं. मेनिफ़ेस्ट की मदद से, यह तय किया जा सकता है कि क्या लॉन्च करना है (आपकी खबरों वाली साइट का होम पेज) और इसे कैसे लॉन्च करना है (फ़ुलस्क्रीन या सामान्य ब्राउज़र टैब के तौर पर).
यह आपके ऊपर है कि आपको अपने उपयोगकर्ताओं को किस तरह का अनुभव देना है. अगर आपको अपनी साइट पर वही ब्राउज़र क्रोम चाहिए जो किसी साइट पर होना चाहिए, तो डिसप्ले को browser
पर सेट करें.
"display": "browser"
अगर आपको अपनी खबरों वाली साइट को ऐसा दिखाना है कि वह खबरों पर आधारित ज़्यादातर ऐप्लिकेशन की तरह काम करे और यूज़र इंटरफ़ेस (यूआई) से वेब जैसा Chrome हटा दे, तो डिसप्ले को standalone
पर सेट करें.
"display": "standalone"
फ़र्ज़ी पता बार: पता बार को अपने-आप छिपाने की सुविधा
पता बार को अपने-आप छिपाकर, "फ़ुलस्क्रीन" मोड का एहसास दिलाया जा सकता है. इसके लिए, यह तरीका अपनाएं:
window.scrollTo(0, 1);
यह तरीका बहुत आसान है. पेज लोड होने के बाद, ब्राउज़र बार को हटा दिया जाता है. माफ़ करें, यह स्टैंडर्ड नहीं है और इसे ठीक से इस्तेमाल नहीं किया जा सकता. आपको कई समस्याओं का भी सामना करना पड़ता है.
उदाहरण के लिए, जब उपयोगकर्ता किसी पेज पर वापस जाता है, तो ब्राउज़र अक्सर उस पेज पर वापस ले जाते हैं जहां उपयोगकर्ता था. window.scrollTo
का इस्तेमाल करने पर, यह सेटिंग बदल जाती है. इससे उपयोगकर्ता को परेशानी होती है. इस समस्या को हल करने के लिए, आपको localStorage में आखिरी पोज़िशन को सेव करना होगा. साथ ही, असामान्य स्थितियों (उदाहरण के लिए, अगर उपयोगकर्ता ने पेज को कई विंडो में खोला है) से निपटना होगा.
यूज़र एक्सपीरियंस (यूएक्स) के दिशा-निर्देश
फ़ुल स्क्रीन का फ़ायदा पाने वाली साइट बनाते समय, आपको उपयोगकर्ता अनुभव में होने वाले संभावित बदलावों के बारे में पता होना चाहिए. इससे, आपको ऐसी सेवा बनाने में मदद मिलेगी जो आपके उपयोगकर्ताओं को पसंद आएगी.
नेविगेशन कंट्रोल पर भरोसा न करें
iOS में, हार्डवेयर का 'वापस जाएं' बटन या रीफ़्रेश करने का जेस्चर नहीं होता. इसलिए, आपको यह पक्का करना होगा कि उपयोगकर्ता, ऐप्लिकेशन में कहीं भी जा सकें.
सभी मुख्य प्लैटफ़ॉर्म पर, यह पता लगाया जा सकता है कि आपका ऐप्लिकेशन फ़ुल स्क्रीन मोड में चल रहा है या इंस्टॉल किया गया मोड चालू है.
iOS
iOS पर, navigator.standalone
बूलियन का इस्तेमाल करके यह देखा जा सकता है कि उपयोगकर्ता ने ऐप्लिकेशन को होम स्क्रीन से लॉन्च किया है या नहीं.
if (navigator.standalone == true) {
// My app is installed and therefore fullscreen
}
वेब ऐप्लिकेशन मेनिफ़ेस्ट (Chrome, Opera, Samsung)
इंस्टॉल किए गए ऐप्लिकेशन के तौर पर लॉन्च करने पर, Chrome पूरी स्क्रीन पर नहीं चलता. इसलिए, document.fullscreenElement
null दिखाता है और सीएसएस सिलेक्टर काम नहीं करते.
जब कोई उपयोगकर्ता आपकी साइट पर किसी जेस्चर की मदद से फ़ुलस्क्रीन मोड का अनुरोध करता है, तो फ़ुलस्क्रीन मोड के लिए स्टैंडर्ड एपीआई उपलब्ध होते हैं. इनमें सीएसएस स्यूडो सिलेक्टर भी शामिल है. इसकी मदद से, अपने यूज़र इंटरफ़ेस (यूआई) को फ़ुलस्क्रीन मोड के हिसाब से अडजस्ट किया जा सकता है. उदाहरण के लिए,
selector:-webkit-full-screen {
display: block; // displays the element only when in fullscreen
}
selector {
display: none; // hides the element when not in fullscreen mode
}
अगर उपयोगकर्ता होम स्क्रीन से आपकी साइट को लॉन्च करते हैं, तो display-mode
मीडिया
क्वेरी को वेब ऐप्लिकेशन मेनिफ़ेस्ट में तय किए गए विकल्प पर सेट कर दिया जाएगा. पूरी तरह फ़ुल स्क्रीन होने पर, यह होगा:
@media (display-mode: fullscreen) {
}
अगर उपयोगकर्ता ऐप्लिकेशन को स्टैंडअलोन मोड में लॉन्च करता है, तो display-mode
मीडिया क्वेरी standalone
होगी:
@media (display-mode: standalone) {
}
Firefox
जब कोई उपयोगकर्ता आपकी साइट के ज़रिए फ़ुलस्क्रीन मोड का अनुरोध करता है या ऐप्लिकेशन को फ़ुलस्क्रीन मोड में लॉन्च करता है, तो फ़ुलस्क्रीन मोड के सभी स्टैंडर्ड एपीआई उपलब्ध होते हैं. इनमें सीएसएस स्यूडो सिलेक्टर भी शामिल है. इसकी मदद से, अपने यूज़र इंटरफ़ेस (यूआई) को फ़ुलस्क्रीन मोड के हिसाब से अडजस्ट किया जा सकता है. जैसे:
selector:-moz-full-screen {
display: block; // hides the element when not in fullscreen mode
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Internet Explorer
IE में, सीएसएस सूडो क्लास में हाइफ़न नहीं होता. हालांकि, यह Chrome और Firefox की तरह ही काम करता है.
selector:-ms-fullscreen {
display: block;
}
selector {
display: none; // hides the element when not in fullscreen mode
}
खास जानकारी
स्पेसिफ़िकेशन में दी गई स्पेलिंग, IE के इस्तेमाल किए गए सिंटैक्स से मेल खाती हो.
selector:fullscreen {
display: block;
}
selector {
display: none; // hides the element when not in fullscreen mode
}
उपयोगकर्ता को फ़ुलस्क्रीन अनुभव दें
फ़ुलस्क्रीन एपीआई कभी-कभी थोड़ा मुश्किल हो सकता है. ब्राउज़र के वेंडर, उपयोगकर्ताओं को फ़ुलस्क्रीन पेज में लॉक नहीं करना चाहते. इसलिए, उन्होंने फ़ुलस्क्रीन मोड से जल्द से जल्द बाहर निकलने के लिए, कुछ तरीके विकसित किए हैं. इसका मतलब है कि एक से ज़्यादा पेजों वाली फ़ुलस्क्रीन वेबसाइट नहीं बनाई जा सकती, क्योंकि:
window.location = "http://example.com"
का इस्तेमाल करके, प्रोग्राम के हिसाब से यूआरएल बदलने पर, फ़ुलस्क्रीन मोड बंद हो जाता है.- आपके पेज पर मौजूद किसी बाहरी लिंक पर क्लिक करने पर, उपयोगकर्ता फ़ुलस्क्रीन मोड से बाहर निकल जाएगा.
navigator.pushState
एपीआई की मदद से यूआरएल बदलने पर, स्क्रीन पर पूरे ऐप्लिकेशन को देखने की सुविधा भी बंद हो जाएगी.
अगर आपको उपयोगकर्ता को फ़ुलस्क्रीन अनुभव देना है, तो आपके पास दो विकल्प हैं:
- फ़ुल-स्क्रीन मोड में जाने के लिए, इंस्टॉल किए जा सकने वाले वेब ऐप्लिकेशन के तरीकों का इस्तेमाल करें.
- # फ़्रैगमेंट का इस्तेमाल करके, अपने यूज़र इंटरफ़ेस (यूआई) और ऐप्लिकेशन की स्थिति मैनेज करें.
यूआरएल (window.location = "#somestate") को अपडेट करने के लिए #सिंटैक्स का इस्तेमाल करके और window.onhashchange
इवेंट को सुनकर, ऐप्लिकेशन की स्थिति में हुए बदलावों को मैनेज करने के लिए ब्राउज़र के इतिहास स्टैक का इस्तेमाल किया जा सकता है. साथ ही, उपयोगकर्ता को अपने हार्डवेयर के बैक बटन इस्तेमाल करने की अनुमति दी जा सकती है. इसके अलावा, History API का इस्तेमाल करके, प्रोग्राम के हिसाब से बैक बटन का आसान अनुभव भी दिया जा सकता है. इसके लिए, यह तरीका अपनाएं:
window.history.go(-1);
उपयोगकर्ता को यह चुनने की सुविधा दें कि उसे फ़ुलस्क्रीन मोड कब चालू करना है
जब कोई वेबसाइट अचानक से कुछ ऐसा करती है जिसकी उपयोगकर्ता को उम्मीद नहीं होती, तो वह बहुत परेशान हो जाता है. जब कोई उपयोगकर्ता आपकी साइट पर आता है, तो उसे फ़ुलस्क्रीन मोड पर स्विच करने के लिए गुमराह न करें.
पहले टच इवेंट को इंटरसेप्ट न करें और requestFullscreen()
को कॉल न करें.
- यह परेशान करने वाला है.
- ब्राउज़र, आने वाले समय में उपयोगकर्ता से ऐप्लिकेशन को फ़ुलस्क्रीन मोड में चलाने की अनुमति देने के लिए कह सकते हैं.
अगर आपको ऐप्लिकेशन को फ़ुल-स्क्रीन में लॉन्च करना है, तो हर प्लैटफ़ॉर्म के लिए इंस्टॉल करने के अनुभव का इस्तेमाल करें.
उपयोगकर्ता को होम स्क्रीन पर अपना ऐप्लिकेशन इंस्टॉल करने के लिए स्पैम न भेजें
अगर आपको इंस्टॉल किए गए ऐप्लिकेशन के तरीकों से फ़ुलस्क्रीन अनुभव देना है, तो उपयोगकर्ता को ध्यान में रखें.
- सावधानी बरतें. बैनर या फ़ुटर का इस्तेमाल करके, उन्हें बताएं कि वे ऐप्लिकेशन को इंस्टॉल कर सकते हैं.
- अगर उपयोगकर्ता प्रॉम्प्ट को खारिज करता है, तो उसे फिर से न दिखाएं.
- पहली बार आने पर, उपयोगकर्ता आपका ऐप्लिकेशन इंस्टॉल नहीं कर सकते, बशर्ते कि वे आपकी सेवा से संतुष्ट न हों. अपनी साइट पर उपयोगकर्ताओं के सकारात्मक इंटरैक्शन के बाद, उन्हें ऐप्लिकेशन इंस्टॉल करने के लिए कहें.
- अगर कोई उपयोगकर्ता आपकी साइट पर नियमित तौर पर आता है और वह ऐप्लिकेशन इंस्टॉल नहीं करता है, तो आने वाले समय में वह आपका ऐप्लिकेशन इंस्टॉल नहीं करेगा. उन्हें लगातार स्पैम मैसेज न भेजें.
नतीजा
हमारे पास पूरी तरह से स्टैंडर्ड और लागू किया गया एपीआई नहीं है. हालांकि, इस लेख में दिए गए कुछ दिशा-निर्देशों का इस्तेमाल करके, क्लाइंट के बावजूद, उपयोगकर्ता की पूरी स्क्रीन का फ़ायदा उठाने वाले अनुभव आसानी से बनाए जा सकते हैं.