Question

我在Appcelerator中创建了一个HTML项目。我想要一个全屏画布，所以在CSS中我将属性设置为100%（没有引号），我发现它不能与Appcelerator一起使用。

我已尝试'100%'引号和Ti.UI.SIZE，它们的大小都是一个奇怪的大小，具有与下图所示相同的宽高比。我已将画布绿色和车身黄色染色，因此您知道它不是父母的问题。

我尝试过搜索但是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>

Answer 1

正如@HiddenHobbes在评论中所说 - 从CSS中删除引号，如下所示：

canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    background-color: green;
}

这是一个小提琴，表明它有效：JSFiddle

修改

vw和vh也可能有效：

canvas { position: absolute; top: 0; bottom: 0; left: 0; right:0; width: 100vw; height: 100vh; background-color: green; }

vw用于视口宽度，vh是视口高度。

Answer 2

使用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-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]阻止应用进入纵向模式。

Appcelerator Titanium：CSS宽度不会与百分比一起使用

2 个答案: