移除全屏窗口装饰/边框Chrome操作系统应用/信息亭模式 [英] Remove fullscreen window decoration/border Chrome OS app/kiosk mode
问题描述
我有一个Web应用程序，我想在Chromebox上以Kiosk模式运行。到目前为止，我几乎可以完成所有工作，但我似乎无法摆脱屏幕周围恼人的大白色边框。屏幕左上角的屏幕截图（全屏）。我添加了黑色边框来勾勒图片。
我的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
}
}，
权限：[
unlimitedStorage，
notifications，
webview
]，
kiosk_enabled：true，
kiosk_only：true
}
$ b 创建应用程序窗口的文件（ background.js ）：
chrome.ap p.runtime.onLaunched.addListener（function（）{
var options = {
state：'fullscreen'，
resizable：false，
alwaysOnTop：true，
界限：{
top：0，
left：0，
width：1920，
height：1080
}，
frame：'none'/ /不隐藏任何
};
chrome.app.window.create（'application.html'，options）;
}）;
应用程序只是一个webview（ application.html ）：
<！DOCTYPE html>
< html>
< head>
< meta charset ='utf-8'>
< title>剪下的< / title>
< link rel =stylesheettype =text / csshref =application.css>
< / head>
< body>
< webview src =http://snipped.com>< / webview>
< / body>
< / html>
样式表将webview延伸到全维（ application.css code $）：
webview {
height：100％;
宽度：100％;
$ / code> 即使我设置了框架到'none'，它似乎并没有删除窗口框架。如何实现真正的全屏体验。与我在桌面的Google Chrome浏览器中按F11时的外观类似：
在Chromium中，< body> 标签的默认边距为8像素。如果要将所有空间都用于webview，请使用以下样式表确保 0 ：
html，body，webview {
margin：0;
padding：0;
border：0;
display：block;
宽度：100％;
身高：100％;
}
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:
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%;
}
这篇关于移除全屏窗口装饰/边框Chrome操作系统应用/信息亭模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
