ให้เนื้อหาของคุณเป็นประเด็น - API เต็มหน้าจอ

เบราว์เซอร์ส่วนใหญ่สามารถเข้าสู่โหมดเต็มหน้าจอหรือคีออสก์ได้พักหนึ่งแล้ว โดยปกติแล้ว UI ของ Chrome ของเบราว์เซอร์จะหลุดพ้นไป เนื้อหาก็จะถูกยึดครองไปด้วย สำหรับแอปที่ติดตั้งจาก Chrome เว็บสโตร์ ผู้ใช้อาจกำหนดค่าด้วยตนเองเพื่อให้แอปทำงานแบบเต็มหน้าจอได้เมื่อเปิดจากหน้าแท็บใหม่ โหมดเต็มหน้าจอที่กำหนดเองถือว่าเหมาะสม การแสดงแบบเป็นโปรแกรมแบบเต็มหน้าจอดีกว่า

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 ช่วยให้คุณจัดรูปแบบเนื้อหาแบบเต็มหน้าจอได้อย่างง่ายดายตามต้องการ

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