7

私は次のポートフォリオ サイトであるこの Web サイトを持っています: http://lantosistvan.com/temp/viewport-images/

右下隅には、次の JavaScript をトリガーするアンカー タグがあります。

$(".expand").on("click", function() {
    $(document).toggleFullScreen();
    $("#header-container, #footer-container").toggleClass('toggle-display');
    $("header, footer").toggleClass('toggle-height');
    $("a.expand").toggleClass('toggle-bottom');
});

$(window).on("keydown", function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 27, 122) {
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom')
    }
});

最初のコードは、Klaus Reimer による「jquery.fullscreen 1.1.4」.js をトリガーします: https://github.com/kayahr/jquery-fullscreen-plugin

次の行は、「#header-container」と「#footer-container」を非表示にするクラス「toggle-display」を css に追加します。"toggle-height" は "header" と "footer" (30px) に新しい高さを与え、"toggle-bottom" はボタンに新しい右マージンと下マージンを与えます。

ボタンで切り替えると、これはうまく機能します。ただし、誰かが ESC (Firefox の場合) または ESC と F11 (Chrome の場合) ボタンを使用すると、サイトはフルスクリーンからエスケープされますが、挿入された CSS の変更は変更されません。これは経験全体を壊します。

そこで、誰かが Esc キーまたは F11 キーを押したときに、クラスを削除する 2 番目のコード グループを作成しました。

問題：

  • Firefox では、F11 がうまく機能します。クラスを削除しているため、垂直方向の画像の高さのJavaScriptも問題なく画像の高さと縦横比を維持します。
  • ただし、ESCを押すと、フルスクリーンからエスケープされますが、クラスは削除されません。コードを実行するには、もう一度 ESC または F11 を押す必要があります。しかし、jquery.fullscreen は引き続き実行されます (オフコールがなかったため)。同じキーを 2 回押すと、ブラウザのビューポートのサイズを何らかの方法で変更するまで (たとえば、ウィンドウ モードにしてブラウザのサイズを変更するなど)、画像が垂直方向に単純にビューポートに収まりません。
  • Chrome も同様の問題がありますが、Chrome も F11 でネイティブ フルスクリーンに入るため、同様の問題が発生します。

右下のボタンをクリックして ESC を押し、もう一度ボタンを押すと機能が変わります。F11を押した場合と同じように、フルスクリーンになります。誰かが F11 で全画面表示になり、サイト全体を見ることができても問題ありません。オプションでユーザーを制限したくありません。F11が手付かずだったのは私にとって良いことです。

そもそもネイティブのフルスクリーン API が私の JavaScript 行をトリガーする解決策はありますか? フルスクリーンを離れるときは？

更新 2013.09.14。 Webkit関連の問題だと思います。常にネイティブ フルスクリーン モードであったとしても、Firefox (F11) ではネイティブの終了キーではなく、ネイティブの終了キー (ESC) では動作しないのはなぜですか? どういうわけかそれをだますことができますか？

2013.09.15更新。 koala_dev による:

$(".expand").on("click", function() {
    $(document).toggleFullScreen();
});

$(document).on("fullscreenchange", function() {
    if($(document).fullScreen()){
        //Just went into fullscreen
        $("#header-container, #footer-container").addClass('toggle-display');
        $("header, footer").addClass('toggle-height');
        $("a.expand").addClass('toggle-bottom');
    }else{
        //Just exit fullscreen
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom');
    }
});

更新 2013.09.16 - 解決策!

atmeretezo()イベント内の呼び出しに役立たなかったfullscreenchangeので、少し検索しました。:fullscreenCSS 疑似クラスがあることがわかりました。:)

https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

http://www.sitepoint.com/html5-full-screen-api/

だから私はこれでjsを置き換えました：

// https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
// https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
// http://www.sitepoint.com/html5-full-screen-api/
$(document).ready(function(){
    function toggleFullScreen() {
      if (!document.fullscreenElement &&    // alternative standard method
          !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      }
    }

    $(".expand").on("click", function() {
        toggleFullScreen();
    });
});

これらの行を CSS に追加しました。

/* EXPAND */
:-webkit-full-screen #header-container { display: none; visibility: hidden; }
:-webkit-full-screen #footer-container { display: none; visibility: hidden; }
:-moz-full-screen #header-container { display: none; visibility: hidden; }
:-moz-full-screen #footer-container { display: none; visibility: hidden; }
:fullscreen #header-container { display: none; visibility: hidden; }
:fullscreen #footer-container { display: none; visibility: hidden; }

:-webkit-full-screen header { height: 30px; }
:-webkit-full-screen footer { height: 30px; }
:-moz-full-screen header { height: 30px; }
:-moz-full-screen footer { height: 30px; }
:fullscreen header { height: 30px; }
:fullscreen footer { height: 30px; }

:-webkit-full-screen a.expand { bottom: 5px; }
:-moz-full-screen a.expand { bottom: 5px; }
:fullscreen a.expand { bottom: 5px; }
/* EXPAND */

それ以上の div を 1 行に並べることはできません。それ以外の場合は機能しません (理由はわかりませんが、何らかの理由でブラウザーがコードを無視するからです)。

そして、それは完全に機能します！F11 キーは変更せず、Chrome、Firefox はネイティブ フルスクリーン API モードで画像のサイズを完全に変更し、CSS コードはフルスクリーン用にのみ変更されました。

4

1 に答える 1

2

プラグインによって提供される通知イベントを使用して、フルスクリーン状態の変化を警告する必要があります。

$(document).on("fullscreenchange", function() {
    if($(document).fullScreen()){
        //Just went into fullscreen
        $("#header-container, #footer-container").addClass('toggle-display');
        $("header, footer").addClass('toggle-height');
        $("a.expand").addClass('toggle-bottom');
    }else{
        //Just exit fullscreen
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom');
    }
});

if/else なしでこれを実行し、追加/削除の代わりに単に toggleClass を使用して回避することもできます。

于 2013-09-15T08:19:24.017 に答える