पूरी स्क्रीन का अनुभव लेना

हमारे पास इमर्सिव फ़ुलस्क्रीन वेबसाइट और ऐप्लिकेशन आसानी से बनाने की क्षमता है, लेकिन वेब पर मौजूद किसी भी चीज़ की तरह इसे भी करने के कई तरीके हैं. यह अब खास तौर पर ज़रूरी है, क्योंकि ज़्यादातर ब्राउज़र पर "इंस्टॉल किया गया वेब ऐप्लिकेशन" अनुभव काम करता है जो फ़ुलस्क्रीन मोड लॉन्च करता है.

अपने ऐप्लिकेशन या साइट को फ़ुल स्क्रीन पर पाना

किसी उपयोगकर्ता या डेवलपर को वेब ऐप्लिकेशन को फ़ुलस्क्रीन मोड में देखने के कई तरीके मिलते हैं.

• उपयोगकर्ता के जेस्चर के जवाब में, ब्राउज़र को फ़ुलस्क्रीन पर जाने का अनुरोध करें.
• होम स्क्रीन पर ऐप्लिकेशन इंस्टॉल करें.
• नकली बनाएं: पता बार को अपने-आप छिपाएं.

उपयोगकर्ता के जेस्चर के जवाब में ब्राउज़र से फ़ुलस्क्रीन पर जाने का अनुरोध करें

सभी प्लैटफ़ॉर्म एक जैसे नहीं होते. iOS Safari में फ़ुलस्क्रीन API नहीं है, लेकिन हम Android, Firefox, और IE 11+ पर Chrome पर ऐसा करते हैं. आपके बनाए गए ज़्यादातर ऐप्लिकेशन, JS API और फ़ुलस्क्रीन स्पेसिफ़िकेशन के दिए गए सीएसएस सिलेक्टर के संयोजन का इस्तेमाल करेंगे. फ़ुलस्क्रीन अनुभव तैयार करते समय, आपको जिन मुख्य JS API की ज़रूरत है उनकी जानकारी यहां दी गई है:

• element.requestFullscreen() (फ़िलहाल, यह Chrome, Firefox, और IE में प्रीफ़िक्स है) एलिमेंट को फ़ुलस्क्रीन मोड में दिखाता है.
• document.exitFullscreen() (फ़िलहाल, यह Chrome, Firefox, और IE में प्रीफ़िक्स है. इसके बजाय, Firefox cancelFullScreen() का इस्तेमाल करता है) तो फ़ुल स्क्रीन मोड रद्द हो जाता है.
• अगर कोई भी एलिमेंट फ़ुलस्क्रीन मोड में है, तो document.fullscreenElement (फ़िलहाल Chrome, Firefox, और IE में पहले से जोड़ा गया है) 'सही' दिखाता है.

ध्यान दें: आपको दिखेगा कि प्रीफ़िक्स वाले वर्शन में, स्क्रीन पर 'S' अंग्रेज़ी के अक्षरों के बीच काफ़ी अंतर है. यह अजीब है, लेकिन यह समस्या फ़्लाइट में मौजूद खास जानकारी में है.

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

<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 मॉड्यूल का इस्तेमाल किया जा सकता है. यह थोड़ा अलग-अलग JS API और वेंडर प्रीफ़िक्स को एक जैसा एपीआई में दिखाता है.

Fullscreen API से जुड़ी सलाह

दस्तावेज़ को फ़ुलस्क्रीन बनाना

इमेज 1: बॉडी एलिमेंट पर फ़ुलस्क्रीन.

ऐसा लगता है कि आप बॉडी एलिमेंट को फ़ुलस्क्रीन मोड में लेते हैं, लेकिन अगर आप वेबकिट या ब्लिंक आधारित रेंडरिंग इंजन का इस्तेमाल कर रहे हैं, तो इसका असर शरीर की चौड़ाई को सबसे छोटे साइज़ तक कम करने का एक अजीब असर होगा. इस इफ़ेक्ट में, पेज पर मौजूद हर कॉन्टेंट शामिल होगा. (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 प्रॉपर्टी का इस्तेमाल करके, यह तय कर सकता है कि कोई वेबपेज फ़ुल-स्क्रीन मोड में दिखेगा या नहीं.

सेब

Android के लिए Chrome

Chrome टीम ने हाल ही में एक ऐसी सुविधा लागू की है जो उपयोगकर्ता के पेज को होम स्क्रीन पर जोड़ने पर, ब्राउज़र को पेज को फ़ुलस्क्रीन लॉन्च करने के लिए कहती है. यह iOS Safari मॉडल की तरह है.

<meta name="mobile-web-app-capable" content="yes" />

आप डिवाइस की होम स्क्रीन पर ऐप्लिकेशन शॉर्टकट आइकॉन जोड़ने के लिए अपना वेब ऐप्लिकेशन सेट कर सकते हैं और Android के लिए Chrome के "होम स्क्रीन पर जोड़ें" मेनू आइटम का उपयोग करके ऐप्लिकेशन को फ़ुल-स्क्रीन "ऐप्लिकेशन मोड" में लॉन्च कर सकते हैं.

Google Chrome

वेब ऐप्लिकेशन मेनिफ़ेस्ट का इस्तेमाल करना, बेहतर विकल्प है.

वेब ऐप्लिकेशन मेनिफ़ेस्ट (Chrome, Opera, Firefox, Samsung)

वेब ऐप्लिकेशन के लिए मेनिफ़ेस्ट एक सामान्य JSON फ़ाइल है, जो आपको, डेवलपर, यह कंट्रोल करने की सुविधा देती है कि उपयोगकर्ता को आपका ऐप्लिकेशन उन जगहों पर कैसा दिखेगा जहां वे ऐप्लिकेशन देखना चाहते हैं (उदाहरण के लिए, मोबाइल होम स्क्रीन), सीधे उपयोगकर्ता क्या लॉन्च कर सकता है और, सबसे ज़रूरी, कि वे इसे कैसे लॉन्च कर सकते हैं. आने वाले समय में, मेनिफ़ेस्ट की मदद से आपको अपने ऐप्लिकेशन पर ज़्यादा कंट्रोल मिलेगा. लेकिन, अभी हम सिर्फ़ इस बात पर फ़ोकस कर रहे हैं कि आपका ऐप्लिकेशन कैसे लॉन्च किया जा सकता है. खास तौर पर:

1. ब्राउज़र को अपने मेनिफ़ेस्ट के बारे में बताना
2. लॉन्च करने का तरीका बताया जा रहा है

मेनिफ़ेस्ट बनाने और उसे आपकी साइट पर होस्ट करने के बाद, आपको अपने ऐप्लिकेशन वाले सभी पेजों से सिर्फ़ एक लिंक टैग जोड़ना होगा, जैसा कि यहां बताया गया है:

<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"

खबरों वाली साइटें

ज़्यादातर मामलों में समाचार साइटें, कॉन्टेंट पर आधारित कॉन्टेंट पर आधारित होती हैं. ज़्यादातर डेवलपर स्वाभाविक रूप से, किसी समाचार साइट में मेनिफ़ेस्ट जोड़ने के बारे में नहीं सोचेंगे. मेनिफ़ेस्ट से आप यह तय कर सकते हैं कि क्या लॉन्च करना है (आपकी समाचार साइट का मुख्य पेज) और इसे कैसे लॉन्च करना है (फ़ुलस्क्रीन या सामान्य ब्राउज़र टैब के तौर पर).

यह आपको तय करना होता है कि उपयोगकर्ता आपके अनुभव को किस तरह ऐक्सेस करना चाहेंगे. अगर आपको अपनी साइट पर ऐसे सभी ब्राउज़र Chrome चाहिए जिनके किसी साइट पर मौजूद होना चाहिए, तो डिसप्ले को browser पर सेट करें.

    "display": "browser"

अगर आपको यह महसूस कराना है कि समाचार पर आधारित ज़्यादातर ऐप्लिकेशन, अपनी साइट के अनुभव को ऐप्लिकेशन की तरह इस्तेमाल करते हैं और यूज़र इंटरफ़ेस (यूआई) से सभी वेब जैसे Chrome को हटा देते हैं, तो डिसप्ले को standalone पर सेट करके ऐसा किया जा सकता है.

    "display": "standalone"

नकली बनाएं: पता बार अपने-आप छिपाएं

आप पता बार को नीचे बताए गए तरीके से अपने-आप छिपाकर "पूरी स्क्रीन को नकली" बना सकते हैं:

window.scrollTo(0, 1);

सावधानी: चेतावनी: हमने आपको यह दोस्त होने के नाते बताया है. यह मौजूद है. यह एक चीज़ है, लेकिन यह हैक है. कृपया इसका इस्तेमाल न करें. — पॉल

यह एक बहुत आसान तरीका है, पेज लोड होता है और ब्राउज़र बार से उम्मीद के मुताबिक जानकारी गायब रहती है. माफ़ करें, यह स्टैंडर्ड तरीके से नहीं बनाया गया है और यह ठीक से काम नहीं करता है. आपको तरह-तरह की अजीब चीज़ों के साथ भी काम करना होगा.

उदाहरण के लिए, जब उपयोगकर्ता पेज पर वापस आता है, तो ब्राउज़र अक्सर पेज पर उसी जगह को पहले जैसा कर देते हैं. window.scrollTo का इस्तेमाल करने से यह बदल जाता है, जिससे उपयोगकर्ता परेशान होता है. इससे बचने के लिए, आपको localStorage में आखिरी पोज़िशन स्टोर करनी होगी और एज केस से निपटना होगा (उदाहरण के लिए, अगर उपयोगकर्ता ने पेज को एक से ज़्यादा विंडो में खोला हो).

UX से जुड़े दिशा-निर्देश

जब फ़ुल स्क्रीन की सुविधा का इस्तेमाल करने वाली साइट बनाई जाती है, तब उपयोगकर्ता अनुभव में कई तरह के संभावित बदलाव होते हैं. इन बदलावों के बारे में आपको पता होना चाहिए, ताकि अपने उपयोगकर्ताओं की पसंद बनाई जा सके.

नेविगेशन कंट्रोल पर निर्भर न रहें

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

आपके पास यह पता लगाने का विकल्प होता है कि सभी मुख्य प्लैटफ़ॉर्म पर, आपका ऐप्लिकेशन फ़ुलस्क्रीन मोड में चल रहा है या इंस्टॉल किए गए मोड में.

iOS

iOS पर, navigator.standalone बूलियन का इस्तेमाल करके यह देखा जा सकता है कि उपयोगकर्ता होम स्क्रीन से लॉन्च हुआ है या नहीं.

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

वेब ऐप्लिकेशन मेनिफ़ेस्ट (Chrome, Opera, Samsung)

इंस्टॉल किए गए ऐप्लिकेशन के तौर पर लॉन्च करते समय, Chrome सही फ़ुलस्क्रीन अनुभव में नहीं चलता है, इसलिए document.fullscreenElement शून्य दिखाता है और सीएसएस सिलेक्टर काम नहीं करते.

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

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

आईई में, सीएसएस स्यूडो क्लास में हाइफ़न नहीं है. हालांकि, अन्य स्थितियों में यह 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 एपीआई से यूआरएल बदलने पर, फ़ुल स्क्रीन मोड भी इस्तेमाल नहीं किया जा सकेगा.

उपयोगकर्ता को फ़ुलस्क्रीन मोड में रखने के लिए आपके पास दो विकल्प हैं:

1. फ़ुलस्क्रीन मोड पर जाने के लिए, इंस्टॉल किए जा सकने वाले वेब ऐप्लिकेशन तरीके इस्तेमाल करें.
2. # फ़्रैगमेंट का इस्तेमाल करके, अपने यूज़र इंटरफ़ेस (यूआई) और ऐप्लिकेशन की स्थिति को मैनेज करें.

यूआरएल (window.location = "#somestate") को अपडेट करने के लिए #syntax का इस्तेमाल करके और window.onhashchange इवेंट को सुनकर, ऐप्लिकेशन की स्थिति में बदलावों को मैनेज करने के लिए, ब्राउज़र के अपने इतिहास स्टैक का इस्तेमाल किया जा सकता है. साथ ही, उपयोगकर्ता को अपने हार्डवेयर के 'वापस जाएं' बटन इस्तेमाल करने की अनुमति दी जा सकती है या इतिहास एपीआई का इस्तेमाल करके, आसान प्रोग्रामैटिक 'वापस जाएं' बटन उपलब्ध कराया जा सकता है:

window.history.go(-1);

उपयोगकर्ता को चुनने दें कि उन्हें फ़ुल स्क्रीन पर कब देखना है

उपयोगकर्ता को इससे ज़्यादा परेशान करने वाली कोई बात नहीं है, क्योंकि कोई वेबसाइट ऐसी गतिविधि कर रही है जिसकी उम्मीद नहीं थी. जब कोई उपयोगकर्ता आपकी साइट पर जाए, तो उसे फ़ुल स्क्रीन पर दिखाने की कोशिश न करें.

पहले टच इवेंट को न रोकें और requestFullscreen() को कॉल करें.

1. इससे परेशानी होती है.
2. ब्राउज़र, ऐप्लिकेशन को फ़ुलस्क्रीन मोड में ले जाने की अनुमति देने के लिए, आने वाले समय में उपयोगकर्ता को सूचना देने का फ़ैसला ले सकते हैं.

अगर आपको फ़ुल स्क्रीन पर ऐप्लिकेशन लॉन्च करना है, तो हर प्लैटफ़ॉर्म के लिए इंस्टॉल करने से जुड़े अनुभवों का इस्तेमाल करें.

उपयोगकर्ता को होम स्क्रीन पर आपका ऐप्लिकेशन इंस्टॉल करने के लिए, स्पैम न भेजें

अगर इंस्टॉल किए गए ऐप्लिकेशन के ज़रिए, फ़ुलस्क्रीन मोड का इस्तेमाल करने की योजना बनाई है, तो उपयोगकर्ता को ध्यान में रखें.

• संयम रखें. बैनर या फ़ुटर का इस्तेमाल करके उन्हें बताएं कि वे ऐप्लिकेशन इंस्टॉल कर सकते हैं.
• अगर प्रॉम्प्ट को खारिज कर दिया जाता है, तो उसे दोबारा न दिखाएं.
• पहली बार विज़िट करने पर, हो सकता है कि उपयोगकर्ता ऐप्लिकेशन को तब तक इंस्टॉल न करना चाहें, जब तक वे आपकी सेवा से खुश न हों. आपकी साइट पर कोई पॉज़िटिव इंटरैक्शन होने के बाद, उन्हें इंस्टॉल करने का संकेत दें.
• अगर कोई उपयोगकर्ता नियमित रूप से आपकी साइट पर आता है और वह ऐप्लिकेशन को इंस्टॉल नहीं करता है, तो इसकी संभावना नहीं है कि वह आने वाले समय में आपका ऐप्लिकेशन इंस्टॉल करे. उन्हें स्पैम करते न रहें.

नतीजा

हमारे पास पूरी तरह से स्टैंडर्ड और लागू किया गया एपीआई नहीं है. फिर भी, इस लेख में दिए गए कुछ दिशा-निर्देशों का इस्तेमाल करके, आसानी से ऐसे अनुभव बनाए जा सकते हैं जो क्लाइंट की पूरी स्क्रीन का फ़ायदा उठाते हैं.

सुझाव/राय दें या शिकायत करें