特定の要素を全画面 (フルスクリーン) に設定する
・requestFullscreen
Fullscreen APIを使ってスマホアプリのように全画面で表示させます。
function fFullScreen_On(element) {
if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.requestFullscreen) {
element.requestFullscreen();
}
}
全画面 (フルスクリーン) を解除する
・exitFullscreen
「Esc」や「上からタップして戻るボタンをタップする」と同様に全画面を解除します。
function fFullScreen_Off() {
if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.exitFullscreen) {
document.exitFullscreen();
}
}
フルスクリーンイベントを検知し、拡大率を変更する
モニターの解像度とウィンドウサイズが異なる事が原因により、全画面に設定するとのコンテンツの一部しか表示されなくなります。
これを回避する為に以下の処理を実行する事でページの拡大率を変更します。
1. fullscreenchange：フルスクリーンイベントを検知する。
2. fullScreenElement ：全画面設定時には拡大率を計算する。
3. 全画面解除時には拡大率を1とする。
4. zoom：計算した拡大率に変更する。
document.addEventListener(“webkitfullscreenchange”, handleFSevent, false);
document.addEventListener(“mozfullscreenchange”, handleFSevent, false);
document.addEventListener(“MSFullscreenChange”, handleFSevent, false);
document.addEventListener(“fullscreenchange”, handleFSevent, false);
function handleFSevent() {
var vZoom;
if( (document.webkitFullscreenElement && document.webkitFullscreenElement !== null)
|| (document.mozFullScreenElement && document.mozFullScreenElement !== null)
|| (document.msFullscreenElement && document.msFullscreenElement !== null)
|| (document.fullScreenElement && document.fullScreenElement !== null) ) {
vZoom = screen.width / window.innerWidth;
} else {
vZoom = 1;
}
document.body.style.zoom = vZoom;
}