Question

上下文：

我正在将LibGDX GWT应用程序部署到浏览器。

问题：

下图显示了我的GWT应用程序左上部分的快照（黑色大矩形），其中包含不需要的浏览器填充（默认灰色）。

下图显示了我的GWT应用程序右下角的快照，其中包含了不受欢迎的浏览器滚动条（作为上述填充的潜在结果）。

目标：

基本上，我试图完整地显示我的GWT应用程序（在非弹出窗口中，（不是浏览器-F11）＆＃34;全屏幕＆＃34;上下文初始化为客户端浏览器分辨率），这样应用程序跨越整个HTML空间（不需要滚动条，没有任何填充，只是完全解析的应用程序（同时保持URL /书签部分不变））。

我怎样才能＆＃34;转移＆＃34;我的GWT应用程序（黑色的东西）到左上角（删除填充）？

其他信息：

以上屏幕截图取自1920x1080浏览器分辨率。
在以下平台特定代码上运行Gdx.app.log（）：Width.getClientWidth（）返回1903，Window.getClientHeight（）返回938

HtmlLauncher.java

public class HtmlLauncher extends GwtApplication {

    @Override
    public GwtApplicationConfiguration getConfig() {
        return new GwtApplicationConfiguration(Window.getClientWidth(), Window.getClientHeight());
    }

    @Override
    public ApplicationListener getApplicationListener() {
        return Engine.getInstance();
    }
}

Window.class

/**
   * Gets the height of the browser window's client area excluding the scroll
   * bar.
   *
   * @return the window's client height
   */
  public static int getClientHeight() {
    return Document.get().getClientHeight();
  }

  /**
   * Gets the width of the browser window's client area excluding the vertical
   * scroll bar.
   *
   * @return the window's client width
   */
  public static int getClientWidth() {
    return Document.get().getClientWidth();
  }

的index.html

<!doctype html>
<html>
       <head>
              <title>My Game</title>
              <meta http-equiv="content-type" content="text/html; charset=UTF-8">
              <link href="styles.css" rel="stylesheet" type="text/css">
              <script src="soundmanager2-setup.js"></script>
              <script src="soundmanager2-jsmin.js"></script>
       </head>

       <body>
              <script type="text/javascript" src="html/html.nocache.js"></script>
       </body>
</html>

styles.css的

canvas {
    cursor: default;
    outline: none;
}

body {
    background-color: #222222;
}

.superdev {
    color: rgb(37,37,37);
    text-shadow: 0px 0px 0px rgba(250,250,250,0.1);
    font-size: 50pt;
    display: block;
    position: relative;
    text-decoration: none;
    background-color: rgb(83,87,93);
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
                0px 0px 0px 0px rgb(17,17,17),
                inset 0px 0px 0px 0px rgba(250, 250, 250, .2),
                inset 0px 0px 0px 0px rgba(0, 0, 0, .5);
    width: 0px;
    height: 0px;
    border: 0;
    border-radius: 0px;
    text-align: center;
    line-height: 0px;
}

.superdev:active {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
                0px 0px 0px 0px rgb(17,17,17),
                inset 0px 0px 0px 0px rgba(250, 250, 250, .2),
                inset 0px 0px 0px 0px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
    top: 0px;
    color: #fff;
    text-shadow: 0px 0px 0px rgb(250,250,250);
}

.superdev:hover {
    background-color: rgb(100,100,100);
}

免责声明：index.html和styles.css中的一些默认值通过尝试解决某些问题而陷入困境。

Answer 1

如上所述here：

添加保证金：0;到你的css中的body标签，并显示：block;到你的CSS中的canvas标签。

示例：

canvas {
    display:block;
}

body {
    margin:0;
}

LibGDX删除GWT窗口填充

1 个答案: