বেশিরভাগ ব্রাউজারে কিছুক্ষণের জন্য একটি পূর্ণস্ক্রীন বা কিয়স্ক মোডে প্রবেশ করার ক্ষমতা রয়েছে। মূলত, ব্রাউজারের ক্রোম UI পথের বাইরে চলে যায় এবং সামগ্রীটি দখল করে নেয়। ক্রোম ওয়েব স্টোর থেকে ইনস্টল করা অ্যাপগুলির জন্য, ব্যবহারকারীদের পক্ষে ম্যানুয়ালি কনফিগার করা সম্ভব হয়েছে যাতে নতুন ট্যাব পৃষ্ঠা থেকে খোলার সময় পূর্ণস্ক্রীন চালানোর জন্য অ্যাপটি ম্যানুয়ালি কনফিগার করা যায়। ম্যানুয়াল ফুলস্ক্রিন ভাল। প্রোগ্রাম্যাটিক ফুলস্ক্রিন ভাল!
ফুলস্ক্রিন এপিআই ওয়েব অ্যাপকে জাভাস্ক্রিপ্ট থেকে ব্রাউজারের ফুলস্ক্রিন দেখার মোডে প্রবেশ করতে পৃষ্ঠার যেকোনো বিষয়বস্তুকে প্রোগ্রাম্যাটিকভাবে বলতে দেয়। এর মানে হল WebGL এবং <canvas> গেমগুলি শেষ পর্যন্ত সম্পূর্ণ নিমজ্জিত হতে পারে, ভিডিওগুলি রূপালী পর্দার মতো অনুভব করতে পারে এবং অনলাইন পত্রিকাগুলি বাস্তব চুক্তির মতো অনুভব করতে পারে৷ আমি ব্রাউজারটি পছন্দ করি, তবে আমাদের এটি দ্বারা সীমাবদ্ধ হওয়া উচিত নয় :)
আপনি যদি বিশদটি এড়িয়ে যেতে চান তবে এখানে একটি ডেমো রয়েছে:
তাহলে API কিভাবে কাজ করে? আপনি যদি একটি <div> চান, উদাহরণস্বরূপ, পূর্ণস্ক্রীনে যেতে, সহজে এটিকে বলুন:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
তারপর পূর্ণস্ক্রীন থেকে প্রস্থান করতে, document এর জন্য একটি পদ্ধতি প্রকাশ করে:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
ফুলস্ক্রিন-মোডে বিষয়বস্তু ব্রাউজার ভিউপোর্টে কেন্দ্রীভূত হয়। দেখার জন্য সবচেয়ে উপযুক্ত উপায়ে সেই সামগ্রীটিকে স্টাইল করার জন্য এটি বিকাশকারীর উপর ছেড়ে দেওয়া হয়েছে। সাধারণত, আপনি চাইবেন আপনার <div> সম্পূর্ণ স্ক্রীন রিয়েল-এস্টেট গ্রহণ করুক। ভাল খবর হল যে API এর জন্য নতুন CSS ছদ্ম-নির্বাচক অন্তর্ভুক্ত রয়েছে:
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;
}
CSS ছদ্ম-নির্বাচনকারীরা আপনার ইচ্ছামত পূর্ণস্ক্রীন সামগ্রী স্টাইল করা খুব সহজ করে তোলে।
Chrome 15, FF 14, IE 11 এবং Opera 12.1-এ ফুলস্ক্রিন API ডিফল্টরূপে সক্রিয় করা আছে। বাকি API সম্পর্কে আরও তথ্যের জন্য, বিশেষত্ব দেখুন।
আপডেট করা হয়েছে 2012-10-11 : বিশেষ পরিবর্তনের সাথে ইনলাইন হতে। requestFullscreen() এ "S" কে ছোট করা হয়েছে এবং document.webkitCancelFullScreen() কে document.webkitExitFullscreen() এ পরিবর্তন করেছে। আপডেট করা ব্রাউজার সামঞ্জস্যপূর্ণ মন্তব্য.
আপডেট করা হয়েছে 2014-02-11 : IE এর উপসর্গ অন্তর্ভুক্ত করতে, স্ট্যান্ডার্ড CSS সিনট্যাক্স যোগ করুন এবং ব্রাউজার সামঞ্জস্যপূর্ণ মন্তব্য আপডেট করুন। ধন্যবাদ @dstorey এবং @patrickkettner ।