Hãy để nội dung của bạn lên tiếng - API toàn màn hình

Hầu hết các trình duyệt hiện đều có thể chuyển sang chế độ toàn màn hình hoặc chế độ kiosk trong một khoảng thời gian. Về cơ bản, giao diện người dùng Chrome của trình duyệt sẽ bị loại bỏ và nội dung sẽ thay thế. Đối với các ứng dụng được cài đặt qua Cửa hàng Chrome trực tuyến, người dùng thậm chí có thể định cấu hình theo cách thủ công để ứng dụng chạy ở chế độ toàn màn hình khi mở từ Trang thẻ mới. Chế độ toàn màn hình thủ công là tốt. Chế độ toàn màn hình có lập trình sẽ tốt hơn!

Fullscreen API (API Toàn màn hình) cho phép các ứng dụng web dùng JavaScript để lập trình cho bất kỳ nội dung nào trên trang chuyển sang chế độ xem toàn màn hình của trình duyệt. Điều này có nghĩa là các trò chơi WebGL và <canvas> cuối cùng cũng có thể trở nên sống động, video có thể mang lại cảm giác như trên màn ảnh rộng và tạp chí trực tuyến có thể mang lại cảm giác như thật. Tôi yêu trình duyệt, nhưng chúng ta không nên bị ràng buộc bởi trình duyệt :)

Nếu bạn muốn bỏ qua thông tin chi tiết, hãy xem bản minh hoạ sau:

Ảnh chụp màn hình minh hoạ ở chế độ toàn màn hình

Vậy API này hoạt động như thế nào? Ví dụ: nếu bạn muốn <div> chuyển sang chế độ toàn màn hình, bạn chỉ cần yêu cầu như sau:

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

Sau đó, để thoát khỏi chế độ toàn màn hình, document sẽ hiển thị một phương thức cho việc đó:

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

Nội dung ở chế độ toàn màn hình được căn giữa trong khung nhìn của trình duyệt. Nhà phát triển có thể tuỳ ý định kiểu cho nội dung đó theo cách phù hợp nhất để xem. Thông thường, bạn sẽ muốn <div> chiếm toàn bộ không gian màn hình. Tin vui là API này bao gồm các bộ chọn giả lập CSS mới cho việc này:

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;
}

Bộ chọn giả lập CSS giúp bạn dễ dàng tạo kiểu cho nội dung toàn màn hình theo bất kỳ cách nào bạn muốn.

Theo mặc định, Fullscreen API được bật trong Chrome 15, FF 14, IE 11 và Opera 12.1. Để biết thêm thông tin về phần còn lại của API, hãy xem thông số kỹ thuật.

Cập nhật ngày 11 tháng 10 năm 2012: để phù hợp với các thay đổi về thông số kỹ thuật. Đã viết thường "S" trong requestFullscreen() và thay đổi document.webkitCancelFullScreen() thành document.webkitExitFullscreen(). Cập nhật nhận xét về khả năng tương thích với trình duyệt.

Cập nhật ngày 11/2/2014: để thêm tiền tố cho IE, thêm cú pháp CSS chuẩn và cập nhật nhận xét về khả năng tương thích với trình duyệt. Cảm ơn @dstorey và @patrickkettner.