[英]Remove fullscreen window decoration/border Chrome OS app/kiosk mode
我有一个Web应用程序,我想在chromebox上以kiosk模式运行。 到目前为止,我几乎已经完成了所有工作,但我似乎无法摆脱屏幕周围恼人的大白边框。 屏幕左上角的屏幕截图(全屏)。 我添加了黑色边框来勾勒图像。
我的网络应用程序从蓝色开始,白色边框由谷歌浏览器添加。
我的应用程序的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时的外观类似:
在Chromium中, <body>
标签的默认边距为8像素。 如果要将所有空间专用于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.