ウィンドウが F11 で全画面表示されているかどうかをリッスンする例を次に示します。このコードは、resize
イベントだけでなく F11 もリッスンします。これresize
は、フルスクリーン モードに入るときにイベントが Chrome で発生しないためです。
// Function to check if the window is fullscreened or not
var isFullscreen = function(){
return (window.outerWidth === screen.width && window.outerHeight === screen.height);
};
// Function to run when window size has changed
var screenSizeChange = function(){
if (isFullscreen()) {
document.querySelector('body').innerHTML = 'You are in fullscreen mode';
} else {
document.querySelector('body').innerHTML = 'You are in windowed mode';
}
};
// Run screenSizeChange when `resize` event is triggered
window.addEventListener('resize', screenSizeChange, false);
// Run screenSizeChange when F11 is pressed
window.addEventListener('keyup', function(e){
if (e.keyCode === 122) { // Listen for F11
screenSizeChange();
}
}, false);
試すライブバージョン: http://jsbin.com/ciqeb/4/edit?js,output