Remove fullscreen window decoration/border Chrome

2019-02-23 18:16发布

站内文章 / JavaScript
38 0 0

问题:

I have a web application that I want to run in kiosk mode on a chromebox. So far I've pretty much got it all working, but I can't seem to get rid of the annoying big white border around the screen. A screenshot of the top left corner of the screen (fullscreen). I have added a black border to outline the image.

My web application starts at the blue, the white border is added by Google Chrome.

My app's 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
}

The file that creates the app window (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);
});

The application's just a 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>

And the stylesheet stretches the webview to full dimensions (application.css):

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

Even though I have set the frame to 'none', it doesn't seem to remove the window frame. How to achieve the true fullscreen experience. Similar to how it looks when I press F11 on my desktop's Google Chrome:

回答1:

In Chromium, the <body> tag has a default margin of 8 pixels. If you want to dedicate all space to the webview, make sure that the margin is 0, by using the following stylesheet:

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


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

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~