自动扩展元素以填充屏幕

可以使用JavaScript和jQuery扩展元素，使其最大限度使用屏幕，而不考虑设备的方向。这项技术对于固定大小的游戏非常有用，无论使用什么设备，都能让游戏区域最大化。

FillScreen示例演示了这种技术。此示例的代码位于Amazon Web SDK的以下文件夹中：

Amazon-Web-SDKs/Webapps/examples/Cookbook/FillScreen/

从SDK下载页面下载Amazon Web SDK（单击Web按钮）。

初始标记和样式
扩展函数
- 调用扩展函数

初始标记和样式

所需的初始标记和样式如下：

<div id="fill">
  content goes here
</div>

body {
  padding: 0;
  margin: 0;
}

#fill {
  width: 300px;
  height: 400px;
  border: 1px solid red;
}

应用的样式删除了所有填充和边距，并创建了一个300px × 400px的内容区域，其中有一个1px的红色边框用于实现可见性。

扩展函数

扩展函数采用两个参数：要扩展的div和称为proportional的布尔值，后者用于确定要扩展的div的宽度和高度是否应保持彼此成比例，或者是否可以独立扩展。该函数执行以下步骤以确定如何扩展和定位div：

该函数确定要扩展的div的当前宽度和高度，以及视口的可用宽度和高度。
可用宽度除以当前宽度，可用高度除以当前高度。得出的值就是扩展因子。
如果proportional为true，则两个扩展因子都设置为两者中的较小者，以便宽度和高度保持彼此成比例，而不超出屏幕的可见部分。否则，将独立缩放两侧，以尽可能占用更多空间。
该函数将确定转换因子，以便扩展后的div仍然可以在屏幕上处于居中位置。
该函数使用扩展因子和转换因子的值来更新div的CSS属性。

以下示例展示了扩展函数的实现：

function fillDiv(div, proportional) {
  var currentWidth = div.outerWidth();
  var currentHeight = div.outerHeight();

  var availableHeight = window.innerHeight;
  var availableWidth = window.innerWidth;

  var scaleX = availableWidth / currentWidth;
  var scaleY = availableHeight / currentHeight;

  if (proportional) {
    scaleX = Math.min(scaleX, scaleY);
    scaleY = scaleX;
  }

  var translationX = Math.round((availableWidth - (currentWidth * scaleX)) / 2);
  var translationY = Math.round((availableHeight - (currentHeight * scaleY)) / 2);

  div.css({
    "position": "fixed",
    "left": "0px",
    "top": "0px",
    "-webkit-transform": "translate(" + translationX + "px, "
                                      + translationY + "px) scale3d("
                                      + scaleX + ", " + scaleY + ", 1)",
    "-webkit-transform-origin": "0 0"
  });
}

调用扩展函数

在应用启动和屏幕方向改变时需要调用扩展函数。一旦窗口的内容完全加载，就调用fillDiv函数来使div扩展并居中。此外，将调用fillDiv的处理程序绑定到屏幕方向事件，以便在检测到屏幕方向事件时调用fillDiv。

下面是一个函数示例，initialize()，它调用fillDiv()并将处理程序绑定到屏幕方向事件。initialize()函数绑定到window的加载事件：

function initialize() {
  var div = $("#fill");
  fillDiv(div, true);

  if ("onorientationchange" in window) {
    console.log("Using orientationchange");
    // 在某些Android变体中似乎存在一个Bug，使得
    // innerHeight、outerHeight等指标（用在上文的fillDiv）
    // 在触发orientationEvent时不会更新。
    // 半秒的延迟使浏览器有机会
    // 在重新扩展div之前更新这些指标。
    $(window).bind("orientationchange", function() { setTimeout(function() { fillDiv(div, true); }, 500) });
  } else if ("ondeviceorientation" in window) {
    console.log("Using deviceorientation");
    // 与上述事件不同，这不限于水平/垂直方向
    // 翻转，任何设备方向的移动都可以触发
    $(window).bind("deviceorientation", function() { setTimeout(function() { fillDiv(div, true); }, 500) });
  else {
    console.log("No orientation supported, fallback to resize");
    $(window).bind("resize", function() { fillDiv(div, true); });
  }
}

$(window).load(initialize);