Chrome 和全屏 api：调整元素大小以填充全屏 window 无效

Question

使用以下代码：

function _launchIntoFullscreen (pElement) {
    if(pElement.requestFullscreen) {
        pElement.requestFullscreen();
    } else if(pElement.mozRequestFullScreen) {
        pElement.mozRequestFullScreen();
    } else if(pElement.webkitRequestFullscreen) {
        pElement.webkitRequestFullscreen();
    } else if(pElement.msRequestFullscreen) {
        pElement.msRequestFullscreen();
    }
}

我可以将单个元素切换到全屏模式，例如对于名为 "canvas"

的 dijit.form.ContentPane

_launchIntoFullscreen(canvas.domNode);

工作正常，但不幸的是 Chrome 元素未调整大小以填充所有全屏 window。大小保持不变，并且位于屏幕中央。

我已将以下内容添加到 CSS：

:-webkit-full-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: none;
}

但唯一的变化是位置，现在是左上角，但大小还是一样

附加信息：页面结构为

<div class="page-wrapper" style="width:100%; height:100%;">
  <div id="toolbar" class="toolbar"></div>
  <div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" design="sidebar" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 100%; height: 100%; padding: 0px 0px 32px 0px;">
    <div id="projectPane" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="left" splitter="true" maxSize="Infinity" doLayout="true" style="width: 220px; padding: 0px;">
      <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%; padding: 0px;">
        <div id="treeParent" class="treeParent" data-dojo-type="dijit/layout/ContentPane" title="Palette"  data-dojo-props="selected:true" style="padding:0px;"></div>
        <div id="onlineParent" class="treeParent" data-dojo-type="dijit/layout/ContentPane" title="Online"  data-dojo-props="selected:false" style="padding:0px;"></div>
      </div>
    </div>
    <div id="workAreaContainer" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity" doLayout="true" style="padding: 0px;">
      <div id="workArea" class="workArea" data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%; padding: 0px;" data-dojo-props="tabPosition: 'right-h'">
      </div>
    </div>
    <div id="bottom" data-dojo-type="dijit/layout/TabContainer" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="bottom" splitter="true" maxSize="Infinity" doLayout="true" style="width: 100%; height: 10%; padding: 0px;">
      <div id="log" class="log" title="Log" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" maxSize="Infinity" doLayout="false" style="height:100%;padding:0px;overflow:auto;"></div>
    </div>
    <div id="properties" class="properties" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="right" splitter="true" minSize=0 maxSize="Infinity" doLayout="false" style="width:250px;padding: 0px;"></div>
  </div>
</div>

canvas是动态创建的：

var lTabContainer = dijit.byId("workArea");
var canvas = new ContentPane({
            title: this.keys.pouname, //"Main",
            //id: "surface",
            class: "surfaceX",
            extractContent: "false",
            preventCache: "false",
            preload: "false",
            refreshOnShow: "false",
            maxSize: "Infinity",
            doLayout: "false",
            "data-dojo-props": "selected:true",
            style: "padding: 0px;"
});
lTabContainer.addChild(canvas);

我做错了什么？

在 Firefox 中，即使没有 CSS.

，一切都按预期运行

非常感谢您让我深入了解解决方案。

Answer 1

这是一个示例 html，对我来说，它在 Firefox 和 Chrome 中都有效。尝试将样式 "width: 100%; height: 100%" 添加到将全屏显示的 ContentPane。

<html>
<head>
</head>

<body class="claro">
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">

    <script>
        require([
          "dijit/layout/ContentPane",
          "dojo/dom-construct",
          "dojo/on",
          "dojo/keys",
          "dojo/domReady!"
        ], function(ContentPane, domConstruct, on, keys) {
              var pane = new ContentPane({style: "background-color: green; width: 100%; height: 100%"});
              var div = domConstruct.toDom("<div>Some content here</div>");
              domConstruct.place(div, pane.containerNode);

              pane.placeAt("content");

              on(pane, "click", function() {
                _launchIntoFullscreen(pane.containerNode);
              });
        });

        function _launchIntoFullscreen (pElement) {
            if(pElement.requestFullscreen) {
                pElement.requestFullscreen();
            } else if(pElement.mozRequestFullScreen) {
                pElement.mozRequestFullScreen();
            } else if(pElement.webkitRequestFullscreen) {
                pElement.webkitRequestFullscreen();
            } else if(pElement.msRequestFullscreen) {
                pElement.msRequestFullscreen();
            }
        }
    </script>

    <div style="width: 300px; height: 100px;">
        <div id="content"></div>
    </div>
    <div id="othercontent">Some other content</div>
</body>
</html>

Answer 2

看起来，封闭的 dijit 布局容器阻止了元素拉伸到宽度和高度的 100%。

我找到的解决方案对我来说并不明显，但它有效：

安装在全屏模式更改时收到通知的处理程序
在激活全屏模式时，在处理程序中将宽度和高度设置为 100%。

所以我将函数 _launchIntoFullscreen 更改为

function _launchIntoFullscreen (pElement,pFunction) {
    if(pElement.requestFullscreen) {
        pElement.onfullscreenchange = function(pEvent) {
            if(pFunction) {
                pFunction(document.fullscreenElement);
            }
        }
        pElement.requestFullscreen();
    } else if(pElement.mozRequestFullScreen) {
        pElement.onmozfullscreenchange = function(pEvent) {
            if(pFunction) {
                pFunction(document.mozFullScreenElement);
            }
        }
        pElement.mozRequestFullScreen();
    } else if(pElement.webkitRequestFullscreen) {
        pElement.onwebkitfullscreenchange = function(pEvent) {
            if(pFunction) {
                pFunction(document.webkitFullscreenElement);
            }
        }
        pElement.webkitRequestFullscreen();
    } else if(pElement.msRequestFullscreen) {
        pElement.onmsfullscreenchange = function(pEvent) {
            if(pFunction) {
                pFunction(document.msFullscreenElement);
            }
        }
        pElement.msRequestFullscreen();
    }
}

并调用函数

_launchIntoFullscreen(canvas.domNode,lang.hitch(this,function(pElem) {
                    if(pElem) {
                        pElem.style.width = "100%";
                        pElem.style.height = "100%"
                    }
                }));

此解决方案有一个缺点，即用户会看到（在很短的时间内）元素在切换到全屏模式后会调整大小

Chrome 和全屏 api：调整元素大小以填充全屏 window 无效

Chrome and fullscreen api: resize element to fill the fullscreen window not working

javascript

google-chrome

dojo

webkit

fullscreen