4

PhoneGapアプリケーションを開発していて、デバイスの向きに問題があります。

基本的には、縦向きでも横向きでも、ユーザーが自由にデバイスを自由に使用できるようにしたいと考えています。ただし、画面を縦向きまたは横向きにするだけです。現在、画面も逆向きになっています。

向きの変更を縦向きと横向きのみに制限することはできますか？（したがって、3つではなく合計2つの方向変更の可能性があります）。

編集

私はプラグイン（以下に提案）を使用し、機能する以下のコードを思いつきました。画面を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');
4

3 に答える 3

2

メインの 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 を使用して画面の向きを変更することもできます。少しバグがあるので好きではありませんが、ここで詳細を見つけることができます。これは最も簡単な方法ですが、機能させるには少しプレイする必要があります。

これは簡単にできます：

$(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 度の方向のみに対応するように式を変更する必要があります。

于 2012-12-21T11:10:29.983 に答える
0

私はあなたがただ使用する必要があると思います:

<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;
    }
}
于 2012-12-21T10:45:48.890 に答える