鎖定橫向設備方向

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

我想你只需要使用：

<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 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來改變屏幕方向的可能性。我不喜歡，因爲這是一個小馬車，但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 3

看看這個，我曾經用它來描述你在說什麼。

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

或

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

希望你得到它的工作:)