锁定横向设备方向

Question

正在开发 phonegap 应用程序，但设备方向有问题。

基本上，我希望用户可以随意使用设备，无论是纵向还是横向。但是，我只希望屏幕变成纵向或横向。目前屏幕也在反转横向。

是否可以将方向更改限制为仅纵向和横向？ （所以你总共有 2 种方向改变的可能性，而不是 3 种）。

编辑

我使用了一个插件（建议如下）并提出了以下有效的代码。一旦屏幕旋转到 reverseLandscape，它就会以横向模式显示（正是我想要的）。但是问题是，如果用户将手机转为纵向模式，则方向被锁定并且不会转回纵向。

    $(window).bind('orientationchange', function(event){

    if (event.orientation == 'landscape') {
     navigator.screenOrientation.set('landscape');
    } 
    if (event.orientation == 'portrait') {
     navigator.screenOrientation.set('portrait');
    }

   });

任何人都知道我应该将以下行放在哪里以便解锁方向？

navigator.screenOrientation.set('fullSensor');

Answer 1

您将需要更改主要的 Phonegap Activity 类。首先从 AndroidManifest 文件中删除这一行：

android:screenOrientation="portrait"

我们还需要：

android:configChanges="orientation|keyboardHidden"  

很遗憾，我们无法在 screenOrientation 中配置多个方向模式。因此，我们将通过 java 代码对其进行更改。

这是一个工作代码示例：

package com.roadrunner.mobile21;

import android.content.pm.ActivityInfo;
import android.content.res.Configuration;
import android.hardware.SensorManager;
import android.os.Bundle;
import android.view.Display;
import android.view.OrientationEventListener;
import android.view.Surface;

import com.phonegap.*;

public class RoadRunnerActivity extends DroidGap {
    OrientationEventListener myOrientationEventListener;    

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");

        myOrientationEventListener = new OrientationEventListener(this, SensorManager.SENSOR_DELAY_NORMAL){

            @Override
            public void onOrientationChanged(int arg0) {

                Display display;         
                display = getWindow().getWindowManager().getDefaultDisplay();
                int rotation = display.getRotation();   
                if(rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_90) {
                    unlockScreenOrientation();                      
                }        
            }                
        };  
        if (myOrientationEventListener.canDetectOrientation()){
            myOrientationEventListener.enable();
        } else{
            finish();
        }         
    }


    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        Display display;         
        display = getWindow().getWindowManager().getDefaultDisplay();
        int rotation = display.getRotation();   
        if(rotation == Surface.ROTATION_180 || rotation == Surface.ROTATION_270) {
            lockCurrentScreenOrientation();                     
        } 
    }  

    private void lockCurrentScreenOrientation() {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }

    private void unlockScreenOrientation() {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_USER);
    }    

}

• 还可以通过 css 更改屏幕方向。我不喜欢它，因为它有点马车，但here 你可以找到更多关于它的信息。这是一种最简单的方法，但您需要稍作尝试才能使其发挥作用。

这很容易做到：

$(window).bind("orientationchange", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

您需要更改公式以仅适应 0 度和 90 度方向。

Answer 2

我认为你只需要使用：

<meta name="viewport" content="width=device-width, initial-scale=1">

限制 3 次方向更改。

编辑：

用screen-orientation Plugin试试这个：

function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
    document.addEventListener("orientationChanged", updateOrientation);
}

function updateOrientation(e) {
    switch (e.orientation) {
        case 90:
            navigator.screenOrientation.set('landscape');
            break;
        case -90:
            navigator.screenOrientation.set('landscape');
            break;
    }
}

Answer 3

看看这个，我曾经用它来做你所说的。

http://www.devinrolsen.com/javascript-mobile-orientation-detection/

或

http://www.williammalone.com/articles/html5-javascript-ios-orientation/

希望你能成功:)