اجازه دهید محتوای شما حرف بزند - API تمام صفحه

اکثر مرورگرها مدتی است که این قابلیت را دارند که وارد حالت تمام صفحه یا کیوسک شوند. اساساً، رابط کاربری کروم مرورگر از مسیر خارج می‌شود و محتوا کنترل می‌شود. برای برنامه‌های نصب‌شده از فروشگاه وب Chrome، حتی برای کاربران این امکان وجود دارد که به صورت دستی یک برنامه را طوری پیکربندی کنند که وقتی از صفحه برگه جدید باز می‌شود، تمام صفحه اجرا شود. تمام صفحه دستی خوب است. تمام صفحه برنامه ای بهتر است!

API تمام صفحه به برنامه‌های وب اجازه می‌دهد تا از طریق جاوا اسکریپت به هر محتوای موجود در صفحه بگویند تا به حالت مشاهده تمام صفحه مرورگر وارد شود. این بدان معناست که بازی‌های 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 سبک کردن محتوای تمام صفحه را به هر شکلی که می خواهید بسیار آسان می کند.

API تمام صفحه به طور پیش فرض در کروم 15، FF 14، IE 11 و Opera 12.1 فعال است. برای اطلاعات بیشتر در مورد بقیه API، مشخصات را ببینید.

به روز شده 11-10-2012 : مطابق با تغییرات مشخصات. "S" را در requestFullscreen() کوچک کرد و document.webkitCancelFullScreen() را به document.webkitExitFullscreen() تغییر داد. نظر سازگاری مرورگر به روز شد.

به روز شده 11/02/2014 : برای گنجاندن پیشوندهای IE، اضافه کردن نحو استاندارد CSS و به روز رسانی نظر سازگاری مرورگر. با تشکر از @dstorey و @patrickkettner .