こちらぼくできるの知らなかったのですが、
CSS 3D Clouds
こちらのコードを見ていたら発見したのでメモ。
サンプルコード
window.addEventListener('load', function() { var element = document.getElementById('fullscreenBtn'); if(element) { element.addEventListener('click', function(e) { // webkit if(document.body.webkitRequestFullScreen) { document.body.onwebkitfullscreenchange = function(e) { document.body.style.width = window.innerWidth + 'px'; document.body.style.height = window.innerHeight + 'px'; document.body.onwebkitfullscreenchange = function() { }; }; document.body.webkitRequestFullScreen(); } // mozilla if(document.body.mozRequestFullScreen) { document.body.mozRequestFullScreen(); } e.preventDefault(); }, false); } });
webkitとmozillaの違いとしてはwebkitのほうは、onwebkitfullscreenchangeイベントにて高さを指定してあげないと
すごくちっちゃくなってしまうこと。
ためした対応ブラウザ
- Mac – Firefox15
- Mac – Chrome22
- Mac – Safari6.0
- Win – Firefox15
- Win – Chrome22
- Win – Safari5.1.2
どのブラウザで見ても、フルスクリーンになるときのモーションに違いがあったので楽しかったです。
サンプルURL
github
Google Chrome OS ~最新技術と戦略を完全ガイド~
posted with amazlet at 12.10.15
小池良次 中島聡 伊藤千光 太田昌吾 まえだひさこ 向井領治
インプレスジャパン
売り上げランキング: 343048
インプレスジャパン
売り上げランキング: 343048
document.body.webkitRequestFullScreen()
よりも
document.documentElement.webkitRequestFullScreen()
の方が実際いい