Remove fullscreen window decoration/border Chrome OS app/kiosk mode
Question
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 answers
solution1
3 ACCPTED 2014-07-10 18:08:01
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%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.