在 Android 应用程序/Cordova 3.5 中设置屏幕方向答案

【问题标题】：Set Screen Orientation in Android app / Cordova 3.5在 Android 应用程序/Cordova 3.5 中设置屏幕方向
【发布时间】：2014-12-08 17:03:45
【问题描述】：

有谁知道如何在使用英特尔 XDK 创建的 Android 应用上将屏幕方向锁定为纵向？

我放弃了，在最后的 3 次尝试之后，我发布了整个 html 文档，也许你可以弄清楚我做错了什么：

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Title</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <script src="cordova.js"></script>
    <script src="xhr.js"></script>
    <script src="js/app.js"></script>
    <script src="js/init-app.js"></script>
    <script src="xdk/init-dev.js"></script>

    <script src="intelxdk.js"></script>
    <script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);               
function onDeviceReady(){
      intel.xdk.device.setRotateOrientation('portrait');

    intel.xdk.device.hideSplashScreen();   
}        
    </script>

    <style>
        @-ms-viewport { width: 100vw ; zoom: 100% ; }
        @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }
        @viewport { user-zoom: fixed ; }
    </style>

    <link rel="stylesheet" href="css/app.css">

</head>

<body>
    <h1 class="align-center">Testing orientation lock</h1>
    <p class="align-center">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada risus libero, nec consectetur nunc vestibulum quis. Nam rhoncus ullamcorper dui, vitae imperdiet augue vulputate non. In non sodales dolor. Maecenas sagittis, erat a consequat sollicitudin, enim metus feugiat sem, vel varius mauris eros vitae sapien. Vestibulum sollicitudin arcu eleifend augue feugiat sagittis a non arcu. Duis tempus laoreet faucibus. Morbi fermentum placerat lacus et consectetur. Aenean convallis diam in congue convallis. Ut at ullamcorper mauris. Fusce suscipit tincidunt lacus, et volutpat arcu bibendum eu. In vehicula mi lorem, eget vestibulum orci cursus ac. Etiam vitae quam ut ipsum accumsan viverra. Proin commodo augue diam, tincidunt pretium purus interdum et. Suspendisse tristique vehicula tempus. Praesent ultrices nibh et tortor venenatis, at laoreet augue sodales.
    </p>

</body>
</html>

我已经尝试将以下内容添加到我的 head 标签中，但它不起作用...：

    <script type="text/javascript" language="javascript">
        function onDeviceReady() {

            AppMobi.device.hideSplashScreen();

         //lock orientation
         AppMobi.device.setRotateOrientation("portrait");
         AppMobi.device.setAutoRotate(false);

        };

        document.addEventListener("appMobi.device.ready",onDeviceReady,false);

      function openNewWindow(url){
         AppMobi.device.showRemoteSiteExt(url);
      };
</script>

更新

我还尝试在intelxdk.config.additions.xml 中添加以下内容：

<preference name="Orientation" value="portrait" />

..它没有工作......

更新 2

我也试过了：

   <script src="intelxdk.js"></script>
    <script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);               
function onDeviceReady(){
    // set orientation

      intel.xdk.device.setRotateOrientation('portrait');

    intel.xdk.device.hideSplashScreen();   
}        
    </script>

【问题讨论】：

标签： android xml html screen-orientation intel-xdk

【解决方案1】：

嗯，请按照以下步骤操作：

添加

  android:screenOrientation="portrait"

到您的 AndroidManifest.xml。

它最终应该看起来像这样：

<activity android:screenOrientation="portrait" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:name="inappbrowser" android:theme="@android:style/Theme.Black.NoTitleBar">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

否则总是有this 插件。

【讨论】：

脚本不起作用，但我没有机会尝试该插件，我找到了另一个我一直在测试的插件，它现在工作正常，请参阅我在这篇文章中的回答如果你感兴趣。另外，+1
嗯...我现在正在询问自己是否可以修改 AndroidManifest.xml，因为您无法通过 Intel XDK 访问它（Intel XDK 的工作方式与原生 Android 开发不同）。但似乎可以通过这种方式：software.intel.com/en-us/xdk/faqs/general#android-manifest

【解决方案2】：

在尝试了我能找到和想到的一切之后，我最终使用了this（GitHub 链接）插件。

该插件名为 cordova-yoik-screenorientation，您只需：

下载 GitHub 存档。

将 plugin.xml 和 src 文件夹复制到您的根文件。

复制 screenorientation.android.js、screenorientation.bb10.js、screenorientation.ios.js 和 screenorientation.js 到您的 www 文件夹。

将以下内容添加到您的 index.html 头部：

<script>
   screen.lockOrientation('landscape');
</script>

...您可以根据需要将 landscape 更改为 portrait。

【讨论】：