我在 Appcelerator 中制作了一个 HTML 元素。我想要一个全屏 Canvas ，因此在 CSS 中我将属性设置为 100%(不带引号)，但我发现它不适用于 Appcelerator。
我尝试过带引号的 '100%' 和 Ti.UI.SIZE ，它们都将其大小设置为奇怪的大小，其宽高比与下图。我将 Canvas 涂成绿色，将主体涂成黄色，这样你就知道问题不是出在 parent 身上。
我尝试过搜索，但仅 HTML 应用程序似乎不太受 Appcelerator 的欢迎，所以我找不到答案。
我的CSS:
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
width: '100%';
height: '100%';
background-color: green;
}
body{
background-color: yellow;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=(0047) -->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script defer type="text/javascript" src="../scripts/main.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
最佳答案
正如 @HiddenHobbes 在评论中所说 - 从 CSS 中删除引号，如下所示:
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
width: 100%;
height: 100%;
background-color: green;
}
这是一个 fiddle 来展示它的工作原理:JSFiddle
编辑:
vw 和 vh 也可以工作:
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
width: 100vw;
height: 100vh;
background-color: green;
}
vw 代表视口(viewport)宽度，vh 代表视口(viewport)高度。
关于html - 钛加速器 : CSS width won't work with percentages，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50490005/