רוב הדפדפנים יכולים לעבור למצב מסך מלא או למצב קיוסק למשך זמן מה. בעיקרון, ממשק המשתמש של Chrome לא מפריע, והתוכן משתלט על האתר. עבור אפליקציות שהותקנו מחנות האינטרנט של Chrome, המשתמשים אפילו יכולים להגדיר ידנית אפליקציה כך שתפעל במסך מלא כשהיא נפתחת מדף הכרטיסייה החדשה. מומלץ להשתמש במסך מלא ידני. עדיף להשתמש במסך מלא פרוגרמטי!
Fullscreen API מאפשר לאפליקציות אינטרנט להורות באופן פרוגרמטי על כל תוכן בדף לעבור למצב צפייה במסך מלא של הדפדפן, מ-JavaScript. המשמעות היא שסוף סוף המשחקים 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 למסך מלא מופעל כברירת מחדל בדפדפנים Chrome 15, FF 14, IE 11 ו-Opera 12.1. מידע נוסף על שאר ה-API זמין במפרט.
עדכון מ-11 בדצמבר 2012: תואם לשינויים במפרטים. הקטנת האות 'S' ב-requestFullscreen() ושינוי document.webkitCancelFullScreen() ל-document.webkitExitFullscreen(). ההערה לגבי תאימות הדפדפן עודכנה.
עדכון מ-11 בפברואר 2014: כדי לכלול תחיליות עבור IE, להוסיף את תחביר ה-CSS הסטנדרטי ולעדכן את הערת התאימות של הדפדפן. תודה @dstorey ו-@patrickkettner.