在Chrome/Firefox中全屏按转义时未触发键下达事件

我有这个网站，这是我的下一个作品集网站：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.js的"jquery.fullscreen 1.1.4"：https://github.com/kayahr/jquery-fullscreen-plugin

下一行将在css"切换显示"中添加一个类，该类隐藏了"#header 容器"和"#footer 容器"。"切换高度"为"页眉"和"页脚"（30px）提供新的高度，"切换底部"将为按钮提供新的右边距和下边距。

如果我使用按钮切换，这很好用。但是，如果有人使用 ESC（在 Firefox 中）或 ESC 和 F11（在 Chrome 中）按钮，则网站会从全屏转义，但注入的 CSS 更改保持不变。这将破坏整个体验。

所以我创建了第二个代码组，当有人按 ESC 或 F11 时，我删除了类。

问题：

• 在火狐中，F11 效果很好！它正在删除类，因此，垂直图像高度JavaScript还保持图像高度和纵横比没有问题。
• 但是，如果您按 ESC，它会从全屏转义，但不会删除类。您需要再次按 ESC 或 F11 才能运行代码。但THAN，jquery.fullscreen仍在运行（因为没有任何关闭呼叫）。如果第二次按相同的键，图像垂直简单不适合视口，直到您进行更改浏览器视口大小以某种方式（例如：进入窗口模式和更改浏览器大小）。
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所以我做了一些搜索。原来有一个:fullscreen的CSS伪类！:)

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，否则不起作用（我不知道为什么，浏览器会忽略代码而不是某些原因）。

而且效果很好！F11原封不动，Chrome，Firefox在本机全屏API模式下完美地调整图像大小，并且CSS代码仅针对全屏修改！