Appcelerator Titanium：CSS宽度不适用于百分比 [英] Appcelerator Titanium: CSS width won't work with percentages
问题描述
我在Appcelerator中制作了一个HTML项目。我想要一个全屏画布，所以在CSS中，我将属性设置为 100％（不含引号），我发现它不适用于Appcelerator。
我用引号和 Ti.UI.SIZE '100％' >这两个尺寸都是在一个奇怪的大小，它具有相同的长宽比在下面的图像中看到。我已将绿色帆布着色并且将身体着色为黄色，以便您知道它不是父母那就是问题所在。
p>
我尝试过搜索，但只有HTML应用程序似乎不太适合Appcelerator，所以我找不到答案。
我的CSS：
canvas {
position：absolute;
top：0;
bottom：0;
剩下：0;
right：0;
宽度：'100％';
身高：'100％';
background-color：green;
}
body {
background-color：yellow;
}
HTML：
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 Transitional // EN>
<！ - 从url保存=（0047） - >
< html>
< head>
< meta charset =utf-8/>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1/>
< title>标题< / title>
< meta name =viewportcontent =width = device-width; initial-scale = 1.0/>
< link rel =stylesheettype =text / csshref =../ css / style.css>
< script defer type =text / javascriptsrc =../ scripts / main.js>< / script>
< / head>
< body>
< canvas id =canvas>< / canvas>
< / body>
< / html>
使用Titanium 7.1.1 .GA和Android设备：
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 Transitional // EN>
< html>
< head>
< meta charset =utf-8/>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1/>
< title>标题< / title>
< meta name =viewportcontent =width = device-width; initial-scale = 1.0/>
< style>
#canvas {
position：absolute;
top：0;
bottom：0;
剩下：0;
right：0;
background-color：green;
}
body {
background-color：yellow;
}
< / style>
< / head>
< body>
< canvas id =canvas>< / canvas>
< script>
if（document.readyState！=='loading'）{
eventHandler（）;
} else {
document.addEventListener（'DOMContentLoaded'，eventHandler）;
function eventHandler（）{
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById（canvas）。width = w;
document.getElementById（canvas）。height = h;
var canvas = document.getElementById（canvas）;
var ctx = canvas.getContext（2d）;
ctx.fillStyle =blue;
ctx.fillRect（0，0，canvas.width，canvas.height）;
ctx.fillStyle =red;
ctx.fillRect（10，10，40，40）;
}
< / script>
< / body>
< / html>
< / html>
index.xml
<合金>
< Window class =container>
< WebView id =wwwurl =/ test.html/>
< / Window>
< / Alloy>
index.tss
。container：{
backgroundColor：white
}
#www：{
width：Ti.UI. FILL，
height：Ti.UI.FILL
}
它计算身体准备好后的大小。关于方向更改：您可以将其添加到HTML部分，并在设备旋转后重新计算，或者您可以在Titanium中设置固定方向，例如 orientationModes：[Ti.UI.LANDSCAPE_LEFT，Ti.UI.LANDSCAPE_RIGHT] 以防止应用进入肖像模式。
I have made a HTML project in Appcelerator. I want a full screen canvas so in CSS I set the property to 100% (without quotes) which I found out doesn't work with Appcelerator.
I've tried '100%' with quotes and Ti.UI.SIZE which both size it at a weird size that has the same aspect ratio seen in the image below. I have coloured the canvas green and the body yellow so you know its not the parent that's the problem.
I have tried searching but HTML only apps don't seem to be too popular with Appcelerator so i cannot find an answer.
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>
This is running fine for me using Titanium 7.1.1.GA and an Android device:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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" />
<style>
#canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: green;
}
body {
background-color: yellow;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
if (document.readyState !== 'loading') {
eventHandler();
} else {
document.addEventListener('DOMContentLoaded', eventHandler);
}
function eventHandler() {
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById("canvas").width = w;
document.getElementById("canvas").height = h;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 40, 40);
}
</script>
</body>
</html>
</html>
index.xml
<Alloy>
<Window class="container">
<WebView id="www" url="/test.html"/>
</Window>
</Alloy>
index.tss
".container": {
backgroundColor:"white"
}
"#www":{
width: Ti.UI.FILL,
height: Ti.UI.FILL
}
It calculates the size when the body is ready. About the orientation change: you can either add it to the HTML part and recalculate once the device is rotated or you can set a fixed orientation in Titanium e.g. orientationModes : [Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT] to prevent the app from going to portrait mode.
这篇关于Appcelerator Titanium：CSS宽度不适用于百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
