Appcelerator Titanium：CSS 宽度不适用于百分比答案

【问题标题】：Appcelerator Titanium: CSS width won't work with percentagesAppcelerator Titanium：CSS 宽度不适用于百分比
【发布时间】：2018-11-02 12:57:13
【问题描述】：

我在 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>

【问题讨论】：

请也分享html代码
尝试删除值周围的单引号，即width: 100%;和height: 100%;。
@ElyasEsna html 添加
@HiddenHobbes 这就是我最初在前两行中所做的。这甚至不会给它一个价值，根本没有出现绿色画布
我的错，直接看代码。我对 Appcelerator 不熟悉，但它不接受 100% 会导致问题。

标签： html css titanium appcelerator

【解决方案1】：

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

【讨论】：

我目前正在尝试这个，但它一直说找不到 html 文件。你把它放在你的应用中的什么地方？
我想通了，它适用于 ios 但不适用于 android。我想我会找到另一种使用 js 制作应用程序的方法
@RachelDockter 你好……如果你只是使用 html/css，你不是在制作应用程序，你是在制作一个包装在容器中的网站。我建议真正研究 Titanium 提供的功能，或者只是建立一个网站并使用 cordova 包装它。如果您坚持使用 html，您将永远无法获得构建原生应用程序时真正的“原生”感觉
@RachelDockter 就像 rene-pot 说的：采用原生方式更有意义并提供更多可能性。关于 Android：我只在 Android 上测试了上面的示例，它运行良好。请记住，在不同的设备上，您可能拥有具有不同功能的不同 WebViews 版本。它是在 Android 上加载页面还是整个 webview 是空的？

【解决方案2】：

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

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

这里有一个 Fiddle 来展示它的工作原理：JSFiddle

编辑：

vw 和 vh 也可以工作：

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

vw 表示视口宽度，vh 表示视口高度。

【讨论】：

这就是我所说的“我将属性设置为 100%，我发现它不适用于 appcelerator。”。我将它设置为 100%，没有引号，它根本没有给它一个大小。没有显示绿色画布。我很确定这是 appcelerator 独有的问题
你试过width:100vw;height:100vh;吗？它可能有效:-)
我没有，我现在就试试这个
我尝试了带引号和不带引号的 100vw，它们的大小相同。我有一种感觉，所有这些都可以工作，但它可能会翻转到纵向并返回到横向，这就是它保持纵横比的原因。我不知道