Titanium Appcelerator项目：外部JS无法运行及CSS百分比属性失效

嘿，我来帮你搞定这两个头疼的问题！

一、Canvas无法全屏的问题 #

你在CSS里犯了两个关键错误：

1. Ti.UI.SIZE是Titanium的JS API，不能用在CSS里：CSS只识别标准的CSS长度单位（比如%、vh、px），Ti.UI.SIZE是给Titanium原生组件用的，写在CSS里完全无效。
2. 没设置html和body的全屏样式：默认情况下，html和body元素有默认的margin、padding，而且高度不会自动撑满屏幕，导致canvas的100%无法继承到全屏高度。

给你一个正确的CSS方案：

/* 先让html和body铺满整个屏幕 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 防止出现滚动条 */
}

/* 再设置canvas全屏 */
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: yellow;
}

另外还要确保你的Titanium窗口是全屏的：可以在tiapp.xml里添加<fullscreen>true</fullscreen>，或者在创建窗口的JS代码里设置fullscreen: true。

二、外部JS文件无法运行的问题 #

这个问题很常见——你把script标签放在了head里，JS会在DOM加载完成前执行，这时候document.getElementById("canvas")根本找不到canvas元素，自然不会生效。

有两个解决办法：

方法1：把script标签移到body末尾 #

把引入JS的代码放在</body>标签之前，这样DOM加载完成后再执行JS：

<body>
  <canvas id="canvas"></canvas>
  <!-- 放在这里 -->
  <script type="text/javascript" src="../scripts/main.js"></script>
</body>

方法2：在JS里监听DOM加载完成事件 #

如果不想移动script标签，就在main.js里包裹一个DOM加载完成的监听：

document.addEventListener('DOMContentLoaded', function() {
  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);
});

这样JS会等整个DOM都加载好之后再执行，就能正确找到canvas元素了。

内容的提问来源于stack exchange，提问作者Rachel Dockter