强制设备朝向特定方向

可以使用JavaScript强制用户使用您的应用时将设备朝向特定方向（纵向或横向）。

ForceOrientation示例演示了如何实现此功能。此示例的代码位于Amazon Web SDK的以下文件夹中：

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

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

标记和样式
Orientation-Forcing函数
调用Orientation-Forcing函数

标记和样式

标记应包括应用的内容，以及一个div，其中包含当未按所需方向握持设备时将显示的消息。

<div>此处显示应用的内容</div>

<div id="forcerotation">
  <div id="message">
    握持方向错误。
  </div>
</div>

此处显示的样式应用于“方向错误”消息，该消息最初是隐藏的：

#forcerotation {
    display: none;
    z-index: 1000;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: black;
    color: white;
}

#forcerotation #message {
    position: relative;
    top: 45%;
    text-align: center;
}

Orientation-Forcing函数

orientation-forcing函数依赖于全局变量forcedOrientation的值，该值是强制用户在查看应用内容时采用的设备握持方向。forcedOrientation相当于字符串portrait或landscape。forcedOrientation会与窗口当前方向比较，若二者不匹配，则显示“方向错误”消息。以下是orientation-forcing函数的代码：

var forcedOrientation = "landscape"; // 强制用户横向握持设备
function forceOrientation() {
  var orientation = (Math.abs(window.orientation) === 90 ? "landscape" : "portrait");
  if (orientation !== forcedOrientation) {
    $("#forcerotation").show();
  } else {
    $("#forcerotation").hide();
  }
}

调用Orientation-Forcing函数

每次屏幕方向改变时都需要调用orientation-forcing函数。为此，首先检测方向事件是否被识别。如果是，则将forceOrientation()函数绑定到方向事件，以便在检测到方向事件时调用forceOrientation()。

function init() {
  if (typeof (window.orientation) !== "undefined") {
    var orientationEvent = "resize";
    if ("onorientationchange" in window) {
        orientationEvent = "orientationchange";
    } else if ("ondeviceorientation" in window) {
        orientationEvent = "deviceorientation";
    }
    console.log("Using " + orientationEvent);
    $(window).bind(orientationEvent, forceOrientation);
    forceOrientation(); // 启动时强制朝向特定方向
  } else {
    console.log("No orientation supported");
  }
}

$(init);