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 đều có khả năng chuyển sang chế độ toàn màn hình hoặc kiosk trong một thời gian. Về cơ bản, giao diện người dùng chrome của trình duyệt sẽ không xuất hiện và nội dung sẽ chiếm dụng bạn. Đối với các ứng dụng được cài đặt từ Cửa hàng Chrome trực tuyến, người dùng thậm chí cũng có thể định cấu hình ứng dụng theo cách thủ công để chạy ở chế độ toàn màn hình khi ứng dụng được mở từ trang Thẻ mới. Chế độ toàn màn hình thủ công khá tốt. Chế độ toàn màn hình có lập trình tốt hơn!

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

Nếu bạn muốn bỏ qua phần này, hãy xem bản minh hoạ sau đây:

Ảnh chụp màn hình bản minh hoạ toàn màn hình

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

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 sẽ tự điều chỉnh nội dung đó sao cho phù hợp nhất với người 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 có các trình chọn giả 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ả 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.

API toàn màn hình được bật theo mặc định 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 quy cách kỹ thuật.

Cập nhật ngày 11/10/2012: để phù hợp với các thay đổi về thông số kỹ thuật. Đã hạ chữ "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 của trình duyệt.

Cập nhật ngày 11 tháng 2 năm 2014: để bao gồm các 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 của trình duyệt. Cảm ơn @dstorey và @patrickkettner.