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

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

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

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

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

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

सभी प्लैटफ़ॉर्म एक जैसे नहीं होते. iOS Safari में फ़ुलस्क्रीन API नहीं है, लेकिन हम Android पर Chrome में उपलब्ध कराते हैं, Firefox और IE 11+. आपके द्वारा बनाए जाने वाले अधिकांश एप्लिकेशन 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 और वेंडर प्रीफ़िक्स को एक साथ मिलाता है एक जैसा एपीआई.

फ़ुलस्क्रीन एपीआई से जुड़ी सलाह

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

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

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

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

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 और किनारे वाले मामलों से निपटने के लिए किया जा सकता है (उदाहरण के लिए, अगर उपयोगकर्ता के पास पेज कई विंडो में खुलता है).

उपयोगकर्ता अनुभव से जुड़े दिशा-निर्देश

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

नेविगेशन कंट्रोल का इस्तेमाल न करें

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

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

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

आईई में सीएसएस pseudo class में हाइफ़न नहीं है. हालांकि, यह इसके जैसे काम करता है Chrome और Firefox.

selector:-ms-fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

खास जानकारी

स्पेसिफ़िकेशन में मौजूद स्पेलिंग, आईई के इस्तेमाल किए गए सिंटैक्स से मेल खाती है.

selector:fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

उपयोगकर्ता को फ़ुलस्क्रीन मोड में बनाए रखें

फ़ुलस्क्रीन एपीआई कभी-कभी थोड़ा जटिल हो सकता है. ब्राउज़र वेंडर को इनकी ज़रूरत नहीं होती पेज को पूरी स्क्रीन पर देखने के लिए उपयोगकर्ताओं को लॉक किया जाता है, ताकि जितनी जल्दी हो सके उतनी बार फ़ुलस्क्रीन से बाहर निकाला जा सके. इसका मतलब यह है कि आप कई पेजों में फैली फ़ुलस्क्रीन वेबसाइट की वजह:

• window.location = "http://example.com" का इस्तेमाल करके यूआरएल को प्रोग्राम के हिसाब से बदलने की सुविधा.
• अगर कोई उपयोगकर्ता आपके पेज के अंदर किसी बाहरी लिंक पर क्लिक करता है, तो वह फ़ुलस्क्रीन मोड से बाहर निकल जाएगा.
• navigator.pushState API की मदद से यूआरएल बदलने पर, फ़ुलस्क्रीन अनुभव.

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

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

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

window.history.go(-1);

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

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

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

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

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

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

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

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

नतीजा

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

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