Question

我陷入了全屏模式。虽然在mozilla页面显示它应该。但是当我在全屏模式下使用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();
        }
    });

Answer 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自行规定：

谷歌浏览器中的全屏模式

1 个答案: