التحدث عن المحتوى - واجهة برمجة التطبيقات بملء الشاشة

تتمتع معظم المتصفحات بإمكانية الدخول إلى وضع ملء الشاشة أو وضع Kiosk لفترة من الوقت. في الأساس، تتعطل واجهة مستخدم Chrome في المتصفح وتشغل المحتوى. بالنسبة إلى التطبيقات المثبَّتة من "سوق Chrome الإلكتروني"، يمكن للمستخدمين ضبط التطبيق يدويًا لتشغيله في وضع ملء الشاشة عند فتحه من صفحة "علامة تبويب جديدة". ملء الشاشة اليدوي جيد. يُفضل استخدام وضع ملء الشاشة الآلي.

تسمح واجهة برمجة التطبيقات Fullscreen API لتطبيقات الويب بتوجيه أي محتوى على الصفحة بشكل آلي إلى الدخول إلى وضع العرض بملء الشاشة في المتصفح، من JavaScript. وهذا يعني أنّه يمكن أخيرًا أن تصبح ألعاب WebGL و<canvas> مجسَّمة بشكل كامل، وتبدو الفيديوهات وكأنّها شاشة فضية، كما أنّ المجلات على الإنترنت قد تبدو حقيقية. يعجبني المتصفح، ولكن يجب ألا نقيد به :)

إذا أردت تخطّي التفاصيل، إليك هذا العرض التوضيحي:

لقطة شاشة للعرض التوضيحي بملء الشاشة

إذًا، كيف تعمل واجهة برمجة التطبيقات؟ إذا أردت مثلاً عرض <div> بملء الشاشة، اطلب منه:

div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard

ثم للخروج من وضع ملء الشاشة، تعرض document طريقة لذلك:

document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();

يظهر المحتوى في وضع ملء الشاشة في إطار عرض المتصفّح. ويترك للمطور تصميم ذلك المحتوى بالطريقة الأكثر ملاءمةً للعرض. عليك عادةً اختيار أن يشغل <div> مساحة الشاشة الكاملة. والخبر السار هو أنّ واجهة برمجة التطبيقات تتضمّن أدوات اختيار زائفة جديدة لصفحات الأنماط المتتالية (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. لمزيد من المعلومات حول بقية واجهة برمجة التطبيقات، يمكنك الاطّلاع على المواصفات.

تاريخ التعديل: 11-10-2012: ليتوافق مع تغييرات المواصفات تم اختصار حرف "S" في requestFullscreen() وتغيير document.webkitCancelFullScreen() إلى document.webkitExitFullscreen(). تم تعديل التعليق الخاص بتوافق المتصفّح.

تم التحديث في 11-02-2014: لتضمين بادئات متصفّح IE وإضافة بنية CSS العادية وتحديث التعليق على توافق المتصفّح. شكرًا @dstorey و@patrickkettner.