[英]Remove fullscreen window decoration/border Chrome OS app/kiosk mode
I have a web application that I want to run in kiosk mode on a chromebox. 我有一个Web应用程序,我想在chromebox上以kiosk模式运行。 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.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
): 创建应用程序窗口的文件( 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
): 该应用程序只是一个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扩展为完整维度( 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. 即使我已将frame
设置为'none'
,它似乎也不会删除窗口框架。 How to achieve the true fullscreen experience. 如何实现真正的全屏体验。 Similar to how it looks when I press F11 on my desktop's Google Chrome: 与我在桌面版Google Chrome上按F11时的外观类似:
In Chromium, the <body>
tag has a default margin of 8 pixels. 在Chromium中, <body>
标签的默认边距为8像素。 If you want to dedicate all space to the webview, make sure that the margin
is 0
, by using the following stylesheet: 如果要将所有空间专用于webview,请使用以下样式表确保margin
为0
:
html, body, webview {
margin: 0;
padding: 0;
border: 0;
display: block;
width: 100%;
height: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.