时间戳

首页 > 解决方案 > 如何调用我的 HTML 网页以扩展并适合整个屏幕？

html - 如何调用我的 HTML 网页以扩展并适合整个屏幕？

问题描述

我在 Flutter 应用程序中调用了一个 HTML 文件。使用 WebView 获取文件时，我的输出如下图所示，并没有覆盖我的整个屏幕。
这是我的代码：

<html>
<head>
 <meta charset='utf-8'>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/cdn.theoremreach/v3/theorem_reach.min.js"></script>
</head>
<body>
 <iframe src="https://theoremreach.com/respondent_entry/direct?api_key=abc&user_id=12345"></iframe>
 <script type="text/javascript">
var theoremReachConfig = {
apiKey: "abc",
userId: "12345",
onRewardCenterOpened: onRewardCenterOpened,
onReward: onReward,
onRewardCenterClosed: onRewardCenterClosed
};

var TR = new TheoremReach(theoremReachConfig);

function onRewardCenterOpened(){
console.log("onRewardCenterOpened");

}

function onReward(data){
window.postMessage(data.earnedThisSession)
console.log("onReward: " + data.earnedThisSession);
}

function onRewardCenterClosed(){
console.log("onRewardCenterClosed");
}

if (TR.isSurveyAvailable()) {
TR.showRewardCenter();
}

</script>
</body>
</html>

这就是屏​​幕的样子：

我正在尝试将整个 WebView 放在我的屏幕上。

标签： htmlflutterwebdart

解决方案

将此添加到您的脑海中应该可以正常工作。

<style>
iframe {
  height:100%;
  width:100%;
  margin:0 auto;
  position:absolute;
  top:0;
  left:0;
}
</style>

推荐阅读