Google chrome Chrome Web应用程序webview高度问题_Google Chrome_Google Chrome Extension_Google Chrome App

Google chrome Chrome Web应用程序webview高度问题

google-chrome google-chrome-extension

Google chrome Chrome Web应用程序webview高度问题,google-chrome,google-chrome-extension,google-chrome-app,Google Chrome,Google Chrome Extension,Google Chrome App,我是Chrome网络应用程序编程新手。我想要一个简单的WebApp，它与我的Chrome/Chrome分开（意味着没有标签）。应在正文中显示外部网站下面是我的配置： manifest.json { "name": "Hello World!", "description": "My first Chrome App.", "version": "0.1", "manifest_version": 2, "permissions": [ "webview" ], "ico

我是Chrome网络应用程序编程新手。我想要一个简单的WebApp，它与我的Chrome/Chrome分开（意味着没有标签）。应在正文中显示外部网站

下面是我的配置：

manifest.json

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": [ "webview" ],
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": [ "webview" ],
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 400,
      'height': 600
    }
  });
});

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 1050,
      'height': 700
    }
  });
});

window.html：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <webview style="width: 100%; height: 100%;" src="http://www.google.de"></webview>
  </body>
</html>

我看到了这样一个窗口（它显示了演示用的Chromium）：

但我得到了这些：

因此webview中的高度不正确。当我将高度设置为（例如）192px时，将显示正确的大小。但是100%不起作用…

这可能是因为您使用的是

的相对高度和宽度。请参阅以获取解释

您可以尝试以像素为单位指定宽度和高度，而不是使用100%

<webview style="display:block; width:400px; height:600px;" src="http://www.google.de"></webview>

我在Google+上问过（Chromium engineer atm）。嘿，重播：

chromium团队使用window.onresize重新计算webview宽度此示例中的高度：

在看了这些例子之后，我有了下面的Chrome应用程序

manifest.json：

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 400,
      'height': 600
    }
  });
});

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 1050,
      'height': 700
    }
  });
});

window.html

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <webview src='http://www.google.de' id="xx"></webview>
    <script src="main.js"></script>
  </body>
</html>

现在我得到了我想要的。全屏显示网页的网络视图：

编辑：

我还上传了GitHub上的git repo，以查看源代码：

此解决方案似乎对我有效，它并不理想，但可以：

<webview src="https://github.com" style="width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></webview>

这对我来说很有效（在HTML的样式元素中）：

将此添加到styles.css

webview{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

我不是很喜欢，但是你能试着把同样的样式也设置成

？（在样式文件中比在内联文件中更容易）Hi@Xan不起作用。我现在已经自己回答了我的问题：它正在处理特定的像素。但那不是我想要的。@StefMa你的答案好多了！完美的非常感谢。