我有一个 Web 应用程序，我想在 Chromebox 上以信息亭模式运行。到目前为止，我几乎已经完成了所有工作，但我似乎无法摆脱屏幕周围烦人的白色大边框。屏幕左上角的屏幕截图(全屏)。我添加了一个黑色边框来勾勒图像。
我的 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
}
},
"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 拉伸(stretch)到全尺寸(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%;
}
关于javascript - 删除全屏窗口装饰/边框 Chrome OS 应用程序/信息亭模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24681422/