谷歌浏览器中的全屏模式答案

【问题标题】：Fullscreen mode in google chrome谷歌浏览器中的全屏模式
【发布时间】：2013-11-21 17:47:55
【问题描述】：

我被全屏模式卡住了。尽管在 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();
        }
    });

【问题讨论】：

标签： jquery html google-chrome fullscreen

【解决方案1】：

尝试使用全屏伪类（针对 webkit 和 mozila）：

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

请参阅this Mozilla article 和this David Walsh article 了解用法

来自上述 Mozilla 文章：

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

【讨论】：

要在 WebKit 中获得相同的全屏行为，您需要添加自己的“宽度：100%；高度：100%；”。这太糟糕了
但是整个页面是全屏打开的，而不是我想要的 div
尝试像这样定位您需要的 div： elem = document.getElementById('#div_name');然后在 css: :-webkit-full-screen #div_name