根據窗口大小縮放HTML5網頁
[英]Scaling HTML5 webpage based on the window's size
問題描述
我正在嘗試制作一個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%">
但是，我不知道如何以相同的方式縮放高度。 我已經嘗試過通過僅將height：100％放入其中來解決問題，但這是行不通的。
**此外，我還是HTML5和CSS的新手，所以請大方解釋。
1 個解決方案
解決方案1
1 2014-04-04 18:45:15
看起來您的DOM元素位於head標簽而不是body標簽內。 固定該設置height: 100%應該起作用。
根據 window 大小縮放變換
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.