FullScreen API 調査

特定の要素を全画面(フルスクリーン)にするFullscreen API

こちらを参考にDEMOをつくってみました。

DEMO

http://jsrun.it/kimmy/fullscreen

HTML

<div id="target">
    <img src="http://jsrun.it/assets/5/O/F/h/5OFhg.jpeg" />
</div>
<div id="btn" class="btn red adjust">
  <div class=hole>
    <div class="inner">FULL</div>
  </div>
</div>

JavaScript

(function(win, doc) {

    "use strict";
    
    var target = doc.getElementById("target"),
        btn    = doc.getElementById("btn");

    btn.addEventListener("click", requestFullscreen, false);
    
    function requestFullscreen() {
        if (target.webkitRequestFullscreen) {
            target.webkitRequestFullscreen();
        } else if (target.mozRequestFullScreen) {
            target.mozRequestFullScreen();
        } else if (target.msRequestFullscreen) {
            target.msRequestFullscreen();
        } else if (target.requestFullscreen) {
            target.requestFullscreen();
        } else {
            alert("ERROR.");
        }
    }
    
})(this, document);

SCSS

#target {
    display: none;
    
    &:-webkit-full-screen {
        display: block;
    }
        
    &:-moz-full-screen {
        display: block;
    }

    &:-ms-full-screen {
        display: block;
    }
    
    &:-o-full-screen {
        display: block;
    }

    &:full-screen {
        display: block;
    }
}

フルスクリーン用の擬似クラスがあるのが便利ですね。
IEは11から、iPhone、Androidは未対応と使つかえる機会は限られますが、プレゼン資料とかにつかうのは良いかもしれませんね。