根据窗口大小缩放 HTML5 网页

Scaling HTML5 webpage based on the window's size

本文关键字：HTML5 网页 缩放 窗口大小      更新时间：2023-09-26

我正在尝试获取一个带有两个画布元素的HTML5网页，并像网页窗口一样缩小和放大所有内容。这是我当前的代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <div id="treeArea"class="container" style="width:100%">
        <canvas id="canvas" class="canvas" width="3920" height="2080" style="z-  index:1;"></canvas>
        <canvas id="animCanvas" class="canvas" width="3920" height="2080" style="z-index:2;"></canvas>
    </div>
    <input type="file" id="fileinput" />
    <output id="list"></output>
    <script type="text/javascript" src="leafNodes.js"></script>
</head>
<body onload=initialise()>
</body>
</html>

正常工作的部分是

<div id="treeArea"class="container" style="width:100%">

但是，我不知道如何以相同的方式缩放高度。我已经尝试过通过放置高度：100%来证明这一点，但这不起作用。

**我也是HTML5和CSS的新手，所以请慷慨地解释。

看起来你的 DOM 元素在 head 标签内而不是body标签中。修复该设置后height: 100%应该可以工作。

相关文章：