Fullscreen API をさわったのでメモ #JavaScript

document.querySelector('img').requestFullScreen()とかすると画像が全画面表示されるやつ。画面ロード直後にいきなり全画面表示とかはできないようになってるのでclickイベント内とかで行う。

詳しくは以下

フルスクリーンモードを使用する - Web developer guide | MDN

画像ギャラリー的なUIでの利用を想定してみる。画像をクリックしたら最大化表示されるやつ。

<style>
img{
  width: 300px;
  height: 233px;
  border: solid 4px #aaa;
  border-radius: 16px;
}
img:hover{
  border-color: #00aaff;
  cursor: pointer;
}
</style>
</head>
<body>
<h1>FullScreen Demo for Chrome/Safari</h1>
<img src="https://lh5.googleusercontent.com/-7cggVHG-i74/U5M05ee0DAI/AAAAAAAAHWA/iM3hb0gONVc/s800/IMG_1727.png"/>
<img src="https://lh4.googleusercontent.com/-E-GSa8wymBs/U5MzX0_5G7I/AAAAAAAAHVM/S2igEXSg8nU/s800/IMG_1778.png"/>
<script>
var images = document.querySelectorAll('img');
Array.prototype.forEach.call(images, function (image, index, nodeList) {
  image.addEventListener('click', function(){
    if(image.webkitRequestFullScreen) {
      image.webkitRequestFullScreen();
    }
  });
});

最大化されない

Firefoxの場合、styleのサイズ指定が無視されでっかく表示されるけど、Chrome/Safariの場合は小さいままになってしまう。

Firefox

Chrome/Safari

MDNによると以下でFirefoxと同じ挙動になるとのこと。

img:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

なんか長細くて変ｗ

FullScreen化された時だけ、サムネイル時のstyleを解除するといい感じに動くみたい。

<style>
.noFullScreen img{
  width: 300px;
  height: 233px;
  border: solid 4px #aaa;
  border-radius: 16px;
  display: inline-block;
}
.noFullScreen img:hover{
  border-color: #00aaff;
  cursor: pointer;
}
</style>
<script>
document.addEventListener('webkitfullscreenchange', function(){
  var image = document.webkitFullscreenElement;
  if(image){
    document.body.classList.remove('noFullScreen');
  }
  else{
    document.body.classList.add('noFullScreen');
  }
}, false);
</script>

Chromeの場合のみ最大化解除後、段積みになっちゃう

Chromeの場合のみ以下みたいになってしまう。バグかな。

これについてはinline-blockを指定すれば解決するっぽい。

.noFullScreen img{
  width: 300px;
  height: 233px;
  border: solid 4px #aaa;
  border-radius: 16px;
  display: inline-block; /* 追加 */
}