Chrome やら Firefox やら、requestFullscreen に対応しつつあるブラウザでは写真をクリックしたときにそれを使うようにした。Mac の Chrome だと結構いい感じに動く。

今までページ内に Lightbox っぽく表示していたけれど、これだと画面のサイズによっては、ページにそのまま表示されている場合よりも小さく表示されることがあって、これじゃない感が強かった。フルスクリーンだと画面を基準にして最大限努力していますという感じになる。

requestFullscreen の仕様はぜんぜん読んでないので、フルスクリーン化したときのスタイルの計算方法がよくわかってない。

使っているライブラリ (jQuery colorbox) の場合、表示するときに画面サイズを計算して width と height を埋めてしまうので、fullscreenchange で計算させなおしている。document.fullscreenElement にオブジェクトが入っているかどうかでフルスクリーン化されているかどうかがわかるみたいだ。今回の場合、colorbox が閉じられた場合はフルスクリーンモードも終了するようにしてある (逆にフルスクリーンモードが終了したら colorbox も閉じるようにしてある)。

ホバーしたとき、クリックしたらフルスクリーンになりますよってわかるようにすべきだろうけど、いいアイコンとかがない。