Appcelerator Titanium: CSS width won't work with percentages

问题

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>

回答1:

As @HiddenHobbes says in the comment - remove the quotes from your CSS, like so:

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

Heres a Fiddle to show it works: JSFiddle

EDIT:

vw and vh could possible work too:

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

vw is for Viewport Width and vh is Viewport Height.

回答2:

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.

来源：https://stackoverflow.com/questions/50490005/appcelerator-titanium-css-width-wont-work-with-percentages

标签

html

css

titanium

appcelerator