Jquery 谷歌浏览器的全屏模式

我被全屏模式困住了。虽然在mozzilla中，页面按其应有的方式显示。但当我在全屏模式下使用chrome时，背景色不会显示

        $('.button').on('click', function(){  
        var elem = document.getElementById('mainContainer_preview');  
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
        }
    });

---

尝试使用全屏伪类（适用于webkit和mozila）：

有关用法，请参见和

从上面的Mozilla文章：

值得注意的是Gecko和WebKit之间的一个关键区别 此时的实现：Gecko自动将CSS规则添加到 要拉伸它以填充屏幕的元素：“宽度：100%；高度： 100%". WebKit不会这样做；相反，它将全屏居中 屏幕中相同大小的元素，否则为黑色获得 与WebKit中的全屏行为相同，您需要添加自己的 “宽度：100%；高度：100%；”CSS规则适用于元素本身：

---

要在WebKit中获得相同的全屏行为，您需要添加您自己的“宽度：100%；高度：100%”。这是一件很糟糕的事情，但该死的是，整个页面正在全屏打开，而不是我想要的div，目标是您需要的div，如：elem=document.getElementById（“#div_name”）；然后在css中：：-webkit全屏#div_name

:-webkit-full-screen {
  /* css rules for full screen */
  background: #fff; /* or whatever color you need */
}
:-moz-full-screen {
  /* css rules for full screen */
}