Posted at

Fullscreen API をさわったのでメモ

More than 1 year has passed since last update.

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

詳しくは以下

画像ギャラリー的な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%;
}

なんか長細くて変w

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; /* 追加 */
}