LibGDX 删除 GWT 窗口填充答案

【问题标题】：LibGDX Remove GWT Window PaddingLibGDX 删除 GWT 窗口填充
【发布时间】：2016-11-18 10:42:07
【问题描述】：

上下文：

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

问题：

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

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

目标：

本质上，我正在尝试完整显示我的 GWT 应用程序（在非弹出式（非浏览器 F11）“全屏”上下文中，该上下文已初始化为客户端浏览器分辨率），以便应用程序跨越整个 HTML 空间（不需要滚动条，没有任何填充，只是完全解析的应用程序（同时保持 URL/书签部分不变））。

如何将我的 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 中的一些默认值已经被弄乱了，因为我们试图弄清楚一些事情。

【问题讨论】：

您可以尝试使用 FireBug 或类似工具来找出填充的来源。
知道了。谢谢 - 你已经为我抓紧了两次！

标签： java html css gwt libgdx

【解决方案1】：

如上所述here：

添加边距：0；到你的css中的body标签，并显示：块；到你的css中的canvas标签。

例子：

canvas {
    display:block;
}

body {
    margin:0;
}

【讨论】：