删除全屏窗口装饰/边框 Chrome OS 应用程序/信息亭模式答案

【问题标题】：Remove fullscreen window decoration/border Chrome OS app/kiosk mode删除全屏窗口装饰/边框 Chrome OS 应用程序/信息亭模式
【发布时间】：2014-09-01 02:47:40
【问题描述】：

我有一个 Web 应用程序，我想在 chromebox 上以信息亭模式运行。到目前为止，我几乎已经完成了所有工作，但我似乎无法摆脱屏幕周围恼人的白色大边框。屏幕左上角的屏幕截图（全屏）。我添加了一个黑色边框来勾勒图像。

我的 Web 应用程序以蓝色开始，白色边框由 Google Chrome 添加。

我的应用程序的manifest.json：

{
    "manifest_version": 2,
    "name": "snipped",
    "description": "snipped",
    "version": "1.0",
    "icons": {
        "128": "128.png"
    },
    "app": {
        "background": {
            "scripts": [ "background.js" ],
            "persistent": false
        }
    },
    "permissions": [
        "unlimitedStorage",
        "notifications",
        "webview"
    ],
    "kiosk_enabled": true,
    "kiosk_only": true
}

创建应用程序窗口的文件 (background.js)：

chrome.app.runtime.onLaunched.addListener(function() {
    var options = {
        state: 'fullscreen',
        resizable: false,
        alwaysOnTop: true,
        bounds: {
            top: 0,
            left: 0,
            width: 1920,
            height: 1080
        },
        frame: 'none' // Not hiding anything
    };
    chrome.app.window.create('application.html', options);
});

应用程序只是一个 webview (application.html)：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Snipped</title>
    <link rel="stylesheet" type="text/css" href="application.css">
  </head>


  <body>
    <webview src="http://snipped.com"></webview>
  </body>
</html>

样式表将 webview 拉伸到完整尺寸 (application.css)：

webview {
    height: 100%;
    width: 100%;
}

即使我将frame 设置为'none'，它似乎也没有移除窗框。如何实现真正的全屏体验。类似于我在桌面的 Google Chrome 上按 F11 时的样子：

【问题讨论】：

标签： javascript html google-chrome google-chrome-app google-chrome-os

【解决方案1】：

在 Chromium 中，<body> 标签的默认边距为 8 像素。如果要将所有空间专用于 webview，请使用以下样式表确保 margin 为 0：

html, body, webview {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
}

【讨论】：

我不敢相信我没想到这一点。感谢您的帮助！