Chrome 和全屏 api：调整元素大小以填充全屏窗口不起作用答案

【问题标题】：Chrome and fullscreen api: resize element to fill the fullscreen window not workingChrome 和全屏 api：调整元素大小以填充全屏窗口不起作用
【发布时间】：2016-09-18 15:51:07
【问题描述】：

使用以下代码：

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，该元素的大小未调整为填充所有全屏窗口。大小保持不变，并在屏幕上居中。

我在 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>

画布是动态创建的：

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，一切都会按预期运行。

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

【问题讨论】：

我已经尝试过了，它对我有用，在 Chrome 中也是如此。我使用 containerNode 而不是 divNode。您也可以尝试在 webkitRequestFullscreen() 之后手动调用窗格的 resize() 函数。
尝试使用 containerNode 而不是 domNode（在我的帖子中是一个错字）。还尝试调整CP的大小，也不起作用。我还在我的应用程序中尝试了一些其他元素（其他 ContentPanes，一个 Tree 控件），也没有调整大小。您能否发布适合您的代码。必须有区别（例如与 CSS）

标签： javascript google-chrome dojo webkit fullscreen

【解决方案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>

【讨论】：

该示例有效，但在我的情况下将宽度和高度设置为 100% 在切换到全屏模式之前不起作用。安装了一个处理程序以获取有关全屏更改的通知，然后设置宽度和高度工作

【解决方案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%"
                    }
                }));

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

【讨论】：