เบราว์เซอร์ส่วนใหญ่สามารถเข้าสู่โหมดเต็มหน้าจอหรือโหมดคีออสก์มาระยะหนึ่งแล้ว โดยพื้นฐานแล้ว UI ของ Chrome ของเบราว์เซอร์จะหายไปและเนื้อหาจะแสดงแทน สําหรับแอปที่ติดตั้งจาก Chrome เว็บสโตร์ ผู้ใช้สามารถกําหนดค่าด้วยตนเองให้แอปทํางานแบบเต็มหน้าจอได้เมื่อเปิดจากหน้าแท็บใหม่ การแสดงผลแบบเต็มหน้าจอด้วยตนเองนั้นดี โฆษณาแบบเต็มหน้าจอแบบเป็นโปรแกรมดีกว่า
Fullscreen API ช่วยให้เว็บแอปสามารถบอกเนื้อหาในหน้าเว็บให้เข้าสู่โหมดการดูแบบเต็มหน้าจอของเบราว์เซอร์จาก JavaScript โดยใช้โปรแกรม ซึ่งหมายความว่าเกม WebGL และ <canvas> จะสมจริงมากขึ้น วิดีโอจะดูสมจริงราวกับกำลังดูบนจอภาพยนตร์ และนิตยสารออนไลน์จะดูสมจริงราวกับกำลังอ่านนิตยสารจริง เราชอบเบราว์เซอร์นี้ แต่ไม่ควรจำกัดตัวเองด้วยเบราว์เซอร์นี้ :)
หากต้องการข้ามรายละเอียด โปรดดูตัวอย่างต่อไปนี้
แล้ว API ทำงานอย่างไร เช่น หากต้องการให้ <div> เปลี่ยนเป็นโหมดเต็มหน้าจอ ให้บอก <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 ช่วยให้คุณจัดรูปแบบเนื้อหาแบบเต็มหน้าจอในแบบที่คุณต้องการได้อย่างง่ายดาย
Fullscreen API จะเปิดใช้โดยค่าเริ่มต้นใน Chrome 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