时间戳

首页 > 解决方案 > Appcelerator Titanium：CSS 宽度不适用于百分比

html - Appcelerator Titanium：CSS 宽度不适用于百分比

问题描述

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

标签： htmlcsstitaniumappcelerator

解决方案

正如@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 是视口高度。

推荐阅读