我在 Appcelerator 中制作了一个 HTML 项目。我想要一个全屏画布，所以在 CSS 中我将属性设置为100%（不带引号）我发现它不适用于 Appcelerator。
我试过了'100%'带引号和Ti.UI.SIZE两者的尺寸都采用奇怪的尺寸，具有相同的长宽比，如下图所示。我将画布染成绿色，身体染成黄色，这样你就知道问题不是出在父母身上。
我尝试过搜索，但仅 HTML 应用程序似乎不太受 Appcelerator 的欢迎，所以我找不到答案。
My 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;
}
这是一个小提琴来展示它的工作原理：JSFiddle https://jsfiddle.net/8jawgLxk/
EDIT:
vw 和 vh 也可以工作：
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
width: 100vw;
height: 100vh;
background-color: green;
}
vw 是视口宽度，vh 是视口高度。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
