多重响应 <webview>

Question

我是 chrome 应用程序编程和 Whosebug 的新手。

我有一个简单的 chrome 应用程序，我想在其中将多个网站嵌入到单独的网页视图中，这些网页视图会根据用户制作应用程序的大小自动缩放 window 但同时保持每个网站的比例看法。这样一来，无论应用程序显示在什么尺寸的屏幕上，所有内容都会显示。

我可以使用下面的代码让它在一个 webview 上工作，但是我不知道如何嵌入 1 个以上的站点。

图片显示了我的理想场景。理想的：

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

background.js

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

index.html

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

main.js

function updateWebviews() {
    var webview = document.querySelector("webview");
    webview.style.width = document.documentElement.clientWidth + "px";
};
onload = updateWebviews;
window.onresize = updateWebviews;

Answer 1

更新！

我有超过 1 个 webview 工作和缩放，如我所愿。然而，就像我原来的 post 一样，我希望第二行有 3 个左右的 webviews，它们也像其他应用程序一样随应用程序缩放。这可能吗？我是否必须为每个视图引用一定比例的应用程序？

Index.html

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  body {
    margin: 2px;
  }
</style>
</head>
<body>
<webview id="wv1" style="height:120px" src="http://www.google.com">          </webview>

<webview id="wv2" style="height:420px; width:400px" src="http://www.google.com"></webview>

<webview id="wv3" style="height:220px; width:400px" src="http://www.google.com"></webview>

<webview id="wv4" style="height:190px; width:400px" src="http://www.google.com"></webview>

main.js

 function updateWebviews() {
 var webview = document.getElementById("wv1");
 webview.style.width = document.documentElement.clientWidth + "px";
 var webview = document.getElementById("wv2");
 webview.style.width = document.documentElement.clientWidth + "px";
 var webview = document.getElementById("wv3");
 webview.style.width = document.documentElement.clientWidth + "px";
 var webview = document.getElementById("wv4");
 webview.style.width = document.documentElement.clientWidth + "px";
 };
 onload = updateWebviews;
 window.onresize = updateWebviews;

在我从桥上跳下去之前请有人帮忙！

多重响应 <webview>

Multiple responsive <webview>

html

javascript

webview

google-chrome-app