ブラウザゲームは基本的にページの一部として表示されますが、スマートフォンのような画面が狭いデバイスでは全画面化を行いたくなります。
requestFullscreenを呼び出すことで、特定のエレメントを画面全体に表示することができます。
ボタンを押すと全画面化します。もう一度押すと元に戻ります。
エレメントの表示倍率まで自動で変更してくれるわけではないようなので、レイアウトは自力で調整しなければなりません。
function onClickFullScreen()
{
var node = document.getElementById("fullscreen");
if(getFullScreenElement())
{
setFullScreen(null);
node.style.backgroundColor = "";
}else
{
if(setFullScreen(node))
{
node.style.backgroundColor = "white";
}else
{
alert("フルスクリーン表示に移行できませんでした。");
}
}
}
// フルスクリーン切り替え
function setFullScreen(node)
{
var result = false;
if(node)
{
if(node.requestFullscreen){ node.requestFullscreen(); result = true; }else
if(node.webkitRequestFullscreen){ node.webkitRequestFullscreen(); result = true; }else
if(node.mozRequestFullScreen){ node.mozRequestFullScreen(); result = true; }else
if(node.msRequestFullscreen){ node.msRequestFullscreen(); result = true; }
}else
{
if(document.exitFullscreen){ document.exitFullscreen(); result = true; }else
if(document.cancelFullScreen){ document.cancelFullScreen(); result = true; }else
if(document.webkitCancelFullScreen){ document.webkitCancelFullScreen(); result = true; }else
if(document.mozCancelFullScreen){ document.mozCancelFullScreen(); result = true; }else
if(document.msExitFullscreen){ document.msExitFullscreen(); result = true; }
}
return result;
};
// 現在フルスクリーンになっているエレメントを取得
function getFullScreenElement()
{
return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
};