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

تتيح معظم المتصفّحات إمكانية الدخول إلى وضع ملء الشاشة أو وضع 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 تصميم المحتوى المعروض على الشاشة الكاملة بالطريقة التي تريدها.

تكون واجهة برمجة التطبيقات Fullscreen API مفعَّلة تلقائيًا في الإصدار 15 من Chrome والإصدار 14 من Firefox والإصدار 11 من Internet Explorer والإصدار 12.1 من Opera. لمزيد من المعلومات عن بقية واجهة برمجة التطبيقات، يُرجى الاطّلاع على المواصفات.

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

تم التعديل في 11‏ شباط (فبراير) 2014: لتضمين بادئات لمتصفّح Internet Explorer، أضِف بنية CSS العادية وعدِّل تعليق توافق المتصفّح. مع أطيب التحيّات، ‎@dstorey و‎@patrickkettner