【问题标题】: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 articlethis 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
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-09-06
    • 2023-03-29
    • 1970-01-01
    • 1970-01-01
    • 2013-03-09
    • 2012-01-20
    • 1970-01-01
    相关资源
    最近更新 更多