フルスクリーンへの切替 (Fullscreen API) とイベントの検知 – browser-land

フルスクリーンへの切替 (Fullscreen API) とイベントの検知

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

requestFullscreen
Fullscreen APIを使ってスマホアプリのように全画面で表示させます。

function fFullScreen_On(element) {
 if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
 } else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
 } else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
 } else if (element.requestFullscreen) {
  element.requestFullscreen();
 }
}

 全画面 (フルスクリーン) を解除する

exitFullscreen
「Esc」や「上からタップして戻るボタンをタップする」と同様に全画面を解除します。

function fFullScreen_Off() {
 if (document.webkitCancelFullScreen) {
  document.webkitCancelFullScreen();
 } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 } else if (document.msExitFullscreen) {
  document.msExitFullscreen();
 } else if(document.cancelFullScreen) {
  document.cancelFullScreen();
 } else if(document.exitFullscreen) {
  document.exitFullscreen();
 }
}

 フルスクリーンイベントを検知し、拡大率を変更する

モニターの解像度とウィンドウサイズが異なる事が原因により、全画面に設定するとのコンテンツの一部しか表示されなくなります。
これを回避する為に以下の処理を実行する事でページの拡大率を変更します。

1. fullscreenchange:フルスクリーンイベントを検知する。
2. fullScreenElement :全画面設定時には拡大率を計算する。
3. 全画面解除時には拡大率を1とする。
4. zoom:計算した拡大率に変更する。

document.addEventListener(“webkitfullscreenchange”, handleFSevent, false);
document.addEventListener(“mozfullscreenchange”, handleFSevent, false);
document.addEventListener(“MSFullscreenChange”, handleFSevent, false);
document.addEventListener(“fullscreenchange”, handleFSevent, false);
function handleFSevent() {
 var vZoom;
 if( (document.webkitFullscreenElement && document.webkitFullscreenElement !== null)
  || (document.mozFullScreenElement && document.mozFullScreenElement !== null)
  || (document.msFullscreenElement && document.msFullscreenElement !== null)
  || (document.fullScreenElement && document.fullScreenElement !== null) ) {
  vZoom = screen.width / window.innerWidth;
 } else {
  vZoom = 1;
 }
 document.body.style.zoom = vZoom;
}
Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード