Appcelerator Titanium:CSS 宽度不适用于百分比 [英] Appcelerator Titanium: CSS width won't work with percentages
问题描述
我在 Appcelerator 中做了一个 HTML 项目.我想要一个全屏画布，所以在 CSS 中我将属性设置为 100%(不带引号)，我发现它不适用于 Appcelerator.
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.
我试过带引号的 '100%' 和 Ti.UI.SIZE ，它们都以奇怪的大小调整它的大小，与下图.我将画布涂成绿色，将主体涂成黄色，所以您知道问题不是父级.
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.
我尝试过搜索，但只有 HTML 的应用程序在 Appcelerator 中似乎不太流行，所以我找不到答案.
I have tried searching but HTML only apps don't seem to be too popular with Appcelerator so i cannot find an answer.
我的 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>
推荐答案
这对我使用 Titanium 7.1.1.GA 和 Android 设备运行良好:
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
}
它在身体准备好时计算大小.关于方向更改:您可以将其添加到 HTML 部分并在设备旋转后重新计算，或者您可以在 Titanium 中设置固定方向，例如orientationModes : [Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT] 防止应用进入纵向模式.
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屋！
