开发者控制台

自动扩展元素以填充屏幕


自动扩展元素以填充屏幕

可以使用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:

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