ফুলস্ক্রিন অভিজ্ঞতা তৈরি করা

আমাদের সহজেই নিমজ্জনশীল পূর্ণস্ক্রীন ওয়েবসাইট এবং অ্যাপ্লিকেশন তৈরি করার ক্ষমতা আছে, তবে ওয়েবে যেকোনো কিছুর মতো এটি করার কয়েকটি উপায় রয়েছে। এটি এখন বিশেষভাবে গুরুত্বপূর্ণ কারণ আরও ব্রাউজার একটি "ইনস্টল করা ওয়েব অ্যাপ" অভিজ্ঞতা সমর্থন করছে যা ফুলস্ক্রিন চালু করে।

আপনার অ্যাপ বা সাইট পূর্ণস্ক্রীন পাওয়া

একজন ব্যবহারকারী বা বিকাশকারী একটি ওয়েব অ্যাপ ফুলস্ক্রিন পেতে পারে এমন বিভিন্ন উপায় রয়েছে৷

• ব্যবহারকারীর অঙ্গভঙ্গির প্রতিক্রিয়ায় ব্রাউজারটিকে ফুলস্ক্রিনে যাওয়ার অনুরোধ করুন।
• হোম স্ক্রিনে অ্যাপটি ইনস্টল করুন।
• এটি জাল: ঠিকানা বার স্বয়ংক্রিয় লুকান.

ব্যবহারকারীর অঙ্গভঙ্গির প্রতিক্রিয়ায় ব্রাউজারটিকে ফুলস্ক্রিনে যাওয়ার অনুরোধ করুন

সব প্লাটফর্ম সমান নয় । iOS Safari-এর কোনো ফুলস্ক্রিন API নেই, কিন্তু আমরা Android, Firefox, এবং IE 11+ এ Chrome-এ করি। আপনার তৈরি করা বেশিরভাগ অ্যাপ্লিকেশনগুলি ফুলস্ক্রিন স্পেসিফিকেশন দ্বারা প্রদত্ত JS API এবং CSS নির্বাচকদের সংমিশ্রণ ব্যবহার করবে। একটি ফুলস্ক্রিন অভিজ্ঞতা তৈরি করার সময় আপনাকে যে প্রধান JS APIগুলির যত্ন নিতে হবে তা হল:

• element.requestFullscreen() (বর্তমানে ক্রোম, ফায়ারফক্স এবং IE-তে প্রিফিক্স করা হয়েছে) এলিমেন্টটিকে ফুলস্ক্রিন মোডে প্রদর্শন করে।
• document.exitFullscreen() (বর্তমানে Chrome, Firefox এবং IE-তে প্রিফিক্স করা হয়েছে। ফায়ারফক্স cancelFullScreen() এর পরিবর্তে ব্যবহার করে) ফুলস্ক্রিন মোড বাতিল করে।
• document.fullscreenElement (বর্তমানে Chrome, Firefox, এবং IE-তে প্রিফিক্স করা হয়েছে) যদি কোনো উপাদান ফুলস্ক্রিন মোডে থাকে তাহলে তা সত্য হয়ে ওঠে।

দ্রষ্টব্য: আপনি লক্ষ্য করবেন যে প্রিফিক্সড সংস্করণগুলিতে পর্দায় 'S' এর আবরণের মধ্যে অনেক অসঙ্গতি রয়েছে। এটি বিশ্রী, কিন্তু এটি ফ্লাইটে থাকা চশমাগুলির সাথে সমস্যা।

যখন আপনার অ্যাপটি পূর্ণস্ক্রীন থাকে তখন আপনার কাছে আর ব্রাউজারের UI নিয়ন্ত্রণ উপলব্ধ থাকে না। এটি ব্যবহারকারীদের আপনার অভিজ্ঞতার সাথে যোগাযোগ করার উপায় পরিবর্তন করে। তাদের স্ট্যান্ডার্ড নেভিগেশন নিয়ন্ত্রণ নেই যেমন ফরওয়ার্ড এবং ব্যাকওয়ার্ডস; তাদের পালানোর হ্যাচ নেই যেটি রিফ্রেশ বোতাম। এই দৃশ্যের জন্য এটি পূরণ করা গুরুত্বপূর্ণ. ব্রাউজার ফুলস্ক্রিন মোডে প্রবেশ করলে আপনার সাইটের স্টাইল এবং উপস্থাপনা পরিবর্তন করতে সাহায্য করার জন্য আপনি কিছু CSS নির্বাচক ব্যবহার করতে পারেন।

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

উপরের উদাহরণটি একটু কল্পিত; আমি বিক্রেতা উপসর্গ ব্যবহারের চারপাশে সমস্ত জটিলতা লুকিয়ে রেখেছি।

প্রকৃত কোড অনেক বেশি জটিল। Mozilla একটি খুব দরকারী স্ক্রিপ্ট তৈরি করেছে যা আপনি ফুলস্ক্রিন টগল করতে ব্যবহার করতে পারেন। আপনি দেখতে পাচ্ছেন, বিক্রেতা উপসর্গ পরিস্থিতি নির্দিষ্ট API এর তুলনায় এটি জটিল এবং কষ্টকর। এমনকি নীচের সামান্য সরলীকৃত কোড সহ, এটি এখনও জটিল।

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);
  }
}

আমরা ওয়েব ডেভেলপাররা জটিলতা ঘৃণা করি। একটি চমৎকার উচ্চ-স্তরের বিমূর্ত API যা আপনি ব্যবহার করতে পারেন তা হল Sindre Sorhus' Screenfull.js মডিউল যা দুটি সামান্য ভিন্ন JS API এবং বিক্রেতা উপসর্গকে একটি সামঞ্জস্যপূর্ণ API-এ একীভূত করে।

ফুলস্ক্রিন API টিপস

ডকুমেন্টটি পূর্ণস্ক্রীন করা হচ্ছে

চিত্র 1: শরীরের উপাদানে ফুলস্ক্রিন।

এটা ভাবা স্বাভাবিক যে আপনি বডি এলিমেন্ট পূর্ণস্ক্রীনে নিচ্ছেন, কিন্তু আপনি যদি ওয়েবকিট বা ব্লিঙ্ক ভিত্তিক রেন্ডারিং ইঞ্জিনে থাকেন তবে আপনি দেখতে পাবেন এটি শরীরের প্রস্থকে ক্ষুদ্রতম সম্ভাব্য আকারে সঙ্কুচিত করার একটি অদ্ভুত প্রভাব রয়েছে যাতে সমস্ত বিষয়বস্তু থাকবে। (মোজিলা গেকো ঠিক আছে।)

চিত্র 2: নথির উপাদানে ফুলস্ক্রিন।

এটি ঠিক করতে, বডি এলিমেন্টের পরিবর্তে ডকুমেন্ট এলিমেন্ট ব্যবহার করুন:

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>

এটি আপনাকে অনেক বেশি নমনীয়তা দেয় কারণ আপনি CSS সিউডো সিলেক্টরের সাথে কন্টেইনার অবজেক্টকে একত্রিত করতে পারেন (উদাহরণস্বরূপ "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

আইফোন চালু হওয়ার পর থেকে, ব্যবহারকারীরা হোম স্ক্রিনে ওয়েব অ্যাপ ইনস্টল করতে সক্ষম হয়েছে এবং সেগুলিকে পূর্ণ-স্ক্রিন ওয়েব অ্যাপ হিসেবে চালু করতে পেরেছে।

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

বিষয়বস্তু হ্যাঁ সেট করা থাকলে, ওয়েব অ্যাপ্লিকেশনটি পূর্ণ-স্ক্রীন মোডে চলে; অন্যথায়, এটা না. ডিফল্ট আচরণ হল ওয়েব সামগ্রী প্রদর্শন করতে Safari ব্যবহার করা। আপনি window.navigator.standalone রিড-অনলি বুলিয়ান জাভাস্ক্রিপ্ট বৈশিষ্ট্য ব্যবহার করে একটি ওয়েবপৃষ্ঠা পূর্ণ-স্ক্রীন মোডে প্রদর্শিত হবে কিনা তা নির্ধারণ করতে পারেন।

আপেল

অ্যান্ড্রয়েডের জন্য ক্রোম

ক্রোম টিম সম্প্রতি একটি বৈশিষ্ট্য প্রয়োগ করেছে যা ব্রাউজারকে পৃষ্ঠাটিকে পূর্ণস্ক্রীন চালু করতে বলে যখন ব্যবহারকারী এটি হোম স্ক্রিনে যুক্ত করেন। এটি iOS Safari মডেলের মতো।

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

আপনি একটি ডিভাইসের হোম স্ক্রীনে একটি অ্যাপ্লিকেশন শর্টকাট আইকন যোগ করার জন্য আপনার ওয়েব অ্যাপ সেট আপ করতে পারেন এবং Android এর "অ্যাড টু হোম স্ক্রীন" মেনু আইটেমের জন্য Chrome ব্যবহার করে পূর্ণ-স্ক্রীন "অ্যাপ মোডে" অ্যাপটি লঞ্চ করতে পারেন৷

গুগল ক্রম

একটি ভাল বিকল্প হল ওয়েব অ্যাপ ম্যানিফেস্ট ব্যবহার করা।

ওয়েব অ্যাপ ম্যানিফেস্ট (Chrome, Opera, Firefox, Samsung)

ওয়েব অ্যাপ্লিকেশানগুলির জন্য ম্যানিফেস্ট হল একটি সাধারণ JSON ফাইল যা আপনাকে, বিকাশকারীকে, ব্যবহারকারীদের কাছে আপনার অ্যাপটি কীভাবে প্রদর্শিত হবে তা নিয়ন্ত্রণ করার ক্ষমতা দেয় যেখানে তারা অ্যাপগুলি দেখতে চায় (উদাহরণস্বরূপ মোবাইল হোম স্ক্রীন), নির্দেশ করে ব্যবহারকারী লঞ্চ করতে পারে এবং আরও গুরুত্বপূর্ণভাবে, তারা কীভাবে এটি চালু করতে পারে। ভবিষ্যতে ম্যানিফেস্ট আপনাকে আপনার অ্যাপ্লিকেশানের উপর আরও বেশি নিয়ন্ত্রণ দেবে, কিন্তু এই মুহূর্তে আমরা কীভাবে আপনার অ্যাপ চালু করা যায় তার উপর ফোকাস করছি৷ বিশেষভাবে:

1. ব্রাউজারকে আপনার ম্যানিফেস্ট সম্পর্কে বলা
2. কিভাবে লঞ্চ করতে হয় তার বর্ণনা

একবার আপনার ম্যানিফেস্ট তৈরি হয়ে গেলে এবং এটি আপনার সাইটে হোস্ট করা হলে, আপনাকে যা করতে হবে তা হল আপনার সমস্ত পৃষ্ঠাগুলি থেকে একটি লিঙ্ক ট্যাগ যোগ করুন যা আপনার অ্যাপকে অন্তর্ভুক্ত করে, নিম্নরূপ:

<link rel="manifest" href="/manifest.json" />

ক্রোম অ্যান্ড্রয়েড (অক্টোবর 2014) এর জন্য সংস্করণ 38 থেকে ম্যানিফেস্টগুলিকে সমর্থন করেছে এবং এটি আপনাকে হোম স্ক্রিনে ইনস্টল করা হলে আপনার ওয়েব অ্যাপটি কীভাবে প্রদর্শিত হবে তার উপর নিয়ন্ত্রণ দেয় ( 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"

গেমস

বেশিরভাগ গেম অবিলম্বে একটি ম্যানিফেস্ট থেকে উপকৃত হবে। বেশিরভাগ গেম পূর্ণ-স্ক্রীন চালু করতে চাইবে এবং একটি নির্দিষ্ট অভিযোজন বাধ্য করবে।

আপনি যদি একটি উল্লম্ব স্ক্রোলার বা ফ্ল্যাপি বার্ডসের মতো একটি গেম তৈরি করেন তবে আপনি সম্ভবত আপনার গেমটি সর্বদা পোর্ট্রেট মোডে থাকতে চান।

    "display": "fullscreen",
    "orientation": "portrait"

অন্যদিকে আপনি যদি X-Com-এর মতো একটি পাজলার বা একটি গেম তৈরি করছেন, তাহলে আপনি সম্ভবত গেমটি সর্বদা ল্যান্ডস্কেপ ওরিয়েন্টেশন ব্যবহার করতে চাইবেন।

    "display": "fullscreen",
    "orientation": "landscape"

সংবাদ সাইট

বেশিরভাগ ক্ষেত্রেই নিউজ সাইটগুলি বিশুদ্ধ বিষয়বস্তু-ভিত্তিক অভিজ্ঞতা। বেশিরভাগ বিকাশকারী স্বাভাবিকভাবেই একটি নিউজ সাইটে একটি ম্যানিফেস্ট যোগ করার কথা ভাবেন না। ম্যানিফেস্ট আপনাকে কী লঞ্চ করতে হবে (আপনার নিউজ সাইটের প্রথম পৃষ্ঠা) এবং কীভাবে এটি চালু করতে হবে (ফুলস্ক্রিন বা সাধারণ ব্রাউজার ট্যাব হিসাবে) তা নির্ধারণ করতে দেয়৷

পছন্দটি আপনার উপর নির্ভর করে এবং আপনি কীভাবে মনে করেন আপনার ব্যবহারকারীরা আপনার অভিজ্ঞতা অ্যাক্সেস করতে চান। আপনি যদি চান যে আপনার সাইটে সমস্ত ব্রাউজার ক্রোম থাকুক যা আপনি একটি সাইটের আশা করেন, আপনি প্রদর্শনটিকে browser সেট করতে পারেন৷

    "display": "browser"

আপনি যদি আপনার নিউজ সাইটকে এমন মনে করতে চান যে বেশিরভাগ নিউজ-কেন্দ্রিক অ্যাপগুলি তাদের অভিজ্ঞতাকে অ্যাপ হিসাবে বিবেচনা করে এবং UI থেকে সমস্ত ওয়েব-সদৃশ ক্রোম সরিয়ে দেয়, আপনি ডিসপ্লেকে standalone সেট করে এটি করতে পারেন৷

    "display": "standalone"

এটি জাল: ঠিকানা বার স্বয়ংক্রিয় লুকান

আপনি নিম্নরূপ ঠিকানা বার স্বয়ংক্রিয়ভাবে লুকিয়ে "জাল ফুলস্ক্রিন" করতে পারেন:

window.scrollTo(0, 1);

সতর্কতা: সতর্কতা: আমি আপনাকে বন্ধু হিসাবে বলছি। এটি বিদ্যমান. এটি একটি জিনিস, কিন্তু এটি একটি হ্যাক. এটা ব্যবহার করবেন না দয়া করে. - পল

এটি একটি খুব সহজ পদ্ধতি, পৃষ্ঠা লোড হয় এবং ব্রাউজার বারকে পথ থেকে বেরিয়ে যেতে বলা হয়। দুর্ভাগ্যবশত এটি মানসম্মত নয় এবং ভালভাবে সমর্থিত নয়। এছাড়াও আপনি quirks একটি গুচ্ছ কাছাকাছি কাজ করতে হবে.

উদাহরণস্বরূপ ব্রাউজারগুলি প্রায়শই পৃষ্ঠায় অবস্থান পুনরুদ্ধার করে যখন ব্যবহারকারী এটিতে ফিরে যান। window.scrollTo ব্যবহার করা এটিকে ওভাররাইড করে, যা ব্যবহারকারীকে বিরক্ত করে। এটির চারপাশে কাজ করার জন্য আপনাকে লোকাল স্টোরেজের শেষ অবস্থানটি সংরক্ষণ করতে হবে এবং প্রান্তের ক্ষেত্রে মোকাবেলা করতে হবে (উদাহরণস্বরূপ, ব্যবহারকারীর একাধিক উইন্ডোতে পৃষ্ঠাটি খোলা থাকলে)।

UX নির্দেশিকা

আপনি যখন এমন একটি সাইট তৈরি করছেন যা পূর্ণ স্ক্রীনের সুবিধা নেয় সেখানে সম্ভাব্য ব্যবহারকারীর অভিজ্ঞতার অনেক পরিবর্তন রয়েছে যা আপনার ব্যবহারকারীদের পছন্দ হবে এমন একটি পরিষেবা তৈরি করতে সক্ষম হওয়ার জন্য আপনাকে সচেতন হতে হবে।

নেভিগেশন নিয়ন্ত্রণের উপর নির্ভর করবেন না

iOS এর কোনো হার্ডওয়্যার ব্যাক বোতাম বা রিফ্রেশ অঙ্গভঙ্গি নেই। তাই আপনাকে অবশ্যই নিশ্চিত করতে হবে যে ব্যবহারকারীরা লক ইন না করে পুরো অ্যাপ জুড়ে নেভিগেট করতে পারে।

আপনি সমস্ত প্রধান প্ল্যাটফর্মগুলিতে সহজেই একটি ফুলস্ক্রিন মোডে বা ইনস্টল মোডে চলছে কিনা তা সনাক্ত করতে পারেন।

iOS

আইওএস-এ আপনি navigator.standalone বুলিয়ান ব্যবহার করে দেখতে পারেন যে ব্যবহারকারী হোম স্ক্রীন থেকে চালু করেছে কি না।

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

ওয়েব অ্যাপ ম্যানিফেস্ট (Chrome, Opera, Samsung)

একটি ইনস্টল করা অ্যাপ হিসাবে চালু করার সময়, Chrome সত্যিকারের পূর্ণস্ক্রীন অভিজ্ঞতায় চলছে না তাই document.fullscreenElement শূন্য দেয় এবং CSS নির্বাচকরা কাজ করে না।

যখন ব্যবহারকারী আপনার সাইটে একটি অঙ্গভঙ্গির মাধ্যমে ফুলস্ক্রিনের জন্য অনুরোধ করে, তখন সিএসএস ছদ্ম নির্বাচক সহ স্ট্যান্ডার্ড ফুলস্ক্রিন এপিআই উপলব্ধ থাকে যা আপনাকে আপনার UI মানিয়ে নিতে দেয় ফুলস্ক্রিন অবস্থাতে প্রতিক্রিয়া করার জন্য নিম্নলিখিতগুলির মতো

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) {
}

ফায়ারফক্স

যখন ব্যবহারকারী আপনার সাইটের মাধ্যমে ফুলস্ক্রিনের জন্য অনুরোধ করে বা ব্যবহারকারী ফুলস্ক্রিন মোডে অ্যাপটি চালু করে তখন সিএসএস সিউডো সিলেক্টর সহ সমস্ত স্ট্যান্ডার্ড পূর্ণস্ক্রীন API উপলব্ধ থাকে, যা আপনাকে পূর্ণস্ক্রীন অবস্থায় প্রতিক্রিয়া জানাতে আপনার UI মানিয়ে নিতে দেয়:

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
}

ইন্টারনেট এক্সপ্লোরার

IE-তে CSS সিউডো ক্লাসে একটি হাইফেনের অভাব রয়েছে, তবে অন্যথায় ক্রোম এবং ফায়ারফক্সের মতো একইভাবে কাজ করে।

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
}

ব্যবহারকারীকে পূর্ণস্ক্রীনের অভিজ্ঞতায় রাখুন

ফুলস্ক্রিন API কখনও কখনও একটু চটকদার হতে পারে। ব্রাউজার বিক্রেতারা একটি পূর্ণস্ক্রীন পৃষ্ঠায় ব্যবহারকারীদের লক করতে চায় না তাই তারা যত তাড়াতাড়ি সম্ভব ফুলস্ক্রিন থেকে বেরিয়ে আসার প্রক্রিয়া তৈরি করেছে। এর মানে হল আপনি একটি পূর্ণস্ক্রীন ওয়েবসাইট তৈরি করতে পারবেন না যা একাধিক পৃষ্ঠায় বিস্তৃত কারণ:

• window.location = "http://example.com" ব্যবহার করে প্রোগ্রামগতভাবে URL পরিবর্তন করা হলে তা ফুলস্ক্রিন থেকে বেরিয়ে যায়।
• একজন ব্যবহারকারী আপনার পৃষ্ঠার ভিতরে একটি বাহ্যিক লিঙ্কে ক্লিক করলে ফুলস্ক্রিন থেকে প্রস্থান করবে।
• navigator.pushState API-এর মাধ্যমে ইউআরএল পরিবর্তন করাও ফুলস্ক্রিন অভিজ্ঞতা থেকে বেরিয়ে আসবে।

আপনি যদি ব্যবহারকারীকে একটি পূর্ণস্ক্রীন অভিজ্ঞতায় রাখতে চান তবে আপনার কাছে দুটি বিকল্প রয়েছে:

1. পূর্ণস্ক্রীনে যেতে ইনস্টলযোগ্য ওয়েব অ্যাপ মেকানিজম ব্যবহার করুন।
2. # টুকরা ব্যবহার করে আপনার UI এবং অ্যাপের অবস্থা পরিচালনা করুন।

ইউআরএল আপডেট করতে #সিনট্যাক্স ব্যবহার করে (window.location = "#somestate"), এবং window.onhashchange ইভেন্টটি শুনে আপনি অ্যাপ্লিকেশন অবস্থার পরিবর্তনগুলি পরিচালনা করতে ব্রাউজারের নিজস্ব ইতিহাস স্ট্যাক ব্যবহার করতে পারেন, ব্যবহারকারীকে তাদের ব্যবহার করার অনুমতি দিন হার্ডওয়্যার ব্যাক বোতাম, অথবা নিম্নরূপ ইতিহাস API ব্যবহার করে একটি সাধারণ প্রোগ্রামেটিক ব্যাক বোতাম অভিজ্ঞতা অফার করুন:

window.history.go(-1);

ব্যবহারকারীকে কখন পূর্ণস্ক্রীনে যেতে হবে তা চয়ন করতে দিন

একটি ওয়েবসাইট অপ্রত্যাশিত কিছু করার চেয়ে ব্যবহারকারীর কাছে বিরক্তিকর আর কিছু নেই। যখন একজন ব্যবহারকারী আপনার সাইটে নেভিগেট করেন তখন পূর্ণস্ক্রীনে তাদের ঠকানোর চেষ্টা করবেন না।

প্রথম স্পর্শ ইভেন্টে বাধা দেবেন না এবং requestFullscreen() কল করুন।

1. এটা বিরক্তিকর.
2. ব্রাউজারগুলি ভবিষ্যতে কোনও সময়ে ব্যবহারকারীকে অ্যাপটিকে পূর্ণস্ক্রীন নেওয়ার অনুমতি দেওয়ার বিষয়ে অনুরোধ করার সিদ্ধান্ত নিতে পারে।

আপনি যদি অ্যাপ্লিকেশনগুলিকে পূর্ণস্ক্রীনে চালু করতে চান তবে প্রতিটি প্ল্যাটফর্মের জন্য ইনস্টল করার অভিজ্ঞতাগুলি ব্যবহার করার বিষয়ে চিন্তা করুন।

হোম স্ক্রিনে আপনার অ্যাপ ইনস্টল করতে ব্যবহারকারীকে স্প্যাম করবেন না

আপনি যদি ইনস্টল করা অ্যাপ মেকানিজমের মাধ্যমে একটি ফুলস্ক্রিন অভিজ্ঞতা দেওয়ার পরিকল্পনা করেন তবে ব্যবহারকারীর প্রতি বিবেচ্য হবেন।

• বিচক্ষণ হোন। তাদের জানাতে একটি ব্যানার বা ফুটার ব্যবহার করুন যে তারা অ্যাপটি ইনস্টল করতে পারে।
• যদি তারা প্রম্পটটি খারিজ করে দেয় তবে এটি আবার দেখাবেন না।
• ব্যবহারকারীরা প্রথম পরিদর্শনে গেলে তারা অ্যাপটি ইনস্টল করতে চান না যদি না তারা আপনার পরিষেবাতে খুশি হন। আপনার সাইটে একটি ইতিবাচক মিথস্ক্রিয়া পরে তাদের ইনস্টল করার অনুরোধ বিবেচনা করুন.
• যদি একজন ব্যবহারকারী নিয়মিত আপনার সাইট পরিদর্শন করেন এবং তারা অ্যাপটি ইনস্টল না করেন, তাহলে ভবিষ্যতে তারা আপনার অ্যাপ ইনস্টল করার সম্ভাবনা কম। তাদের স্প্যামিং রাখা না.

উপসংহার

যদিও আমাদের কাছে সম্পূর্ণ প্রমিত এবং বাস্তবায়িত API নেই, এই নিবন্ধে উপস্থাপিত কিছু নির্দেশিকা ব্যবহার করে আপনি সহজেই এমন অভিজ্ঞতা তৈরি করতে পারেন যা ক্লায়েন্ট নির্বিশেষে ব্যবহারকারীর সম্পূর্ণ স্ক্রীনের সুবিধা নেয়।

প্রতিক্রিয়া