Làm thế nào để hạn chế ứng dụng ở chế độ dọc chỉ trong ionic cho tất cả các nền tảng?


121

Tôi đang làm việc trên Ionic / Cordova, tôi đã thêm ứng dụng này vào androidManifest.xmlnhưng điều này không hiệu quả với tôi và ứng dụng vẫn hiển thị theo cả hai cách

android:screenOrientation="portrait"

Làm cách nào để hạn chế ứng dụng của tôi chỉ ở chế độ dọc? Tôi đã kiểm tra trên Android và nó không hoạt động


là nó làm việc cho ion ??, coz thái hoạt động cho ion 2
Manish Kumar

Câu trả lời:


315

Nếu bạn chỉ muốn giới hạn ở chế độ dọc trên tất cả các thiết bị, bạn nên thêm dòng này vào config.xml trong thư mục gốc của dự án.

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

Sau đó, vui lòng xây dựng lại nền tảng bằng cách nhập văn bản bên dưới vào dòng lệnh:

ionic build

2
tốt để xem. đã làm cho tôi. đã kiểm tra trên Android. nhờ Vadiem
Muhammad Faizan Khan

1
làm thế nào để bạn hạn chế chỉ một màn hình cụ thể?
user3607282

1
Tôi đã không kiểm tra này bản thân mình, nhưng bạn có thể nhận được kết quả mong muốn với hướng dẫn này: gajotres.net/...
Vadiem Janssens

4
Điều này dường như chỉ hoạt động khi bạn chạy nó trên btw thiết bị thực. Nếu bạn chạy nó thông qua ứng dụng đám mây Ionic View, nó không có tác dụng.
Johncl

1
Ok cho Ionic 4.
Pierrick Martellière

36

Ionic v2 + Cập nhật

Đối với phiên bản Ionic 2 trở lên, bạn cũng sẽ cần cài đặt gói Ionic Native tương ứng cho bất kỳ plugin nào bạn sử dụng, bao gồm cordova-plugin-và các phonegap-plugin-plugin.

  1. Cài đặt Ionic Native Plugin

    Cài đặt mô-đun TypeScript của Ionic Native cho plugin từ CLI .

    $ ionic cordova plugin add --save cordova-plugin-screen-orientation
    $ npm install --save @ionic-native/screen-orientation
    

    * Lưu ý rằng --savelệnh là tùy chọn và có thể bị bỏ qua nếu bạn không muốn thêm plugin vào package.jsontệp của mình

  2. Nhập ScreenOrientationplugin

    Nhập plugin vào của bạn controller, có thêm chi tiết trong tài liệu .

    import { ScreenOrientation } from '@ionic-native/screen-orientation';
    
    @Component({
        templateUrl: 'app.html',
        providers: [
            ScreenOrientation
        ]
    })
    
    constructor(private screenOrientation: ScreenOrientation) {
      // Your code here...
    }
    
  3. Làm việc của bạn

    Khóa và mở khóa hướng màn hình theo chương trình.

    // Set orientation to portrait
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
    
    // Disable orientation lock
    this.screenOrientation.unlock();
    
  4. Điểm thưởng

    Bạn cũng có thể nhận được định hướng hiện tại.

    // Get current orientation
    console.log(this.screenOrientation.type);  // Will return landscape" or "portrait"
    

1
LƯU Ý: bạn cần "@ ionic-native / core": "^ 3.6.1", vì phiên bản thấp hơn gây ra lỗi: forum.ionicframework.com/t/…
Luckylooke

Thử thêm ScreenOrientation vào danh sách các nhà cung cấp
Tyler

3
ionic plugindường như không còn hoạt động. Tôi nghĩ là bây giờ ionic cordova plugin. Chẳng hạn nhưionic cordova plugin add --save cordova-plugin-screen-orientation
Rockin4Life33

2
thêm vào <preference name="Orientation" value="portrait" />dường như là đủ đối với tôi
tobbe

2
DevApp chỉ đang chạy ứng dụng của bạn dưới dạng chế độ xem web trong ứng dụng DevApp, vì vậy một số tính năng gốc không hoạt động. Hãy thử biên dịch và chạy ứng dụng của bạn trực tiếp trên thiết bị và nó sẽ hoạt động.
Tyler

13

Theo https://cordova.apache.org/docs/en/4.0.0/config_ref/#global-preferences ,

Định hướng cho phép bạn khóa hướng và ngăn giao diện xoay theo những thay đổi về hướng. Các giá trị có thể là mặc định, ngang hoặc dọc. Thí dụ:

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

Cần biết rằng các giá trị này có phân biệt chữ hoa chữ thường, nó là "Định hướng", không phải "định hướng".


1
Khi bạn cuộn lên trên liên kết mà bạn đã cung cấp, liên kết có nội dung như sau: "Thẻ <preference> đặt các tùy chọn khác nhau dưới dạng các cặp thuộc tính tên / giá trị. Tên của mỗi tùy chọn không phân biệt chữ hoa chữ thường . [...]."
Vadiem Janssens

2
"định hướng" hoạt động cho tôi. "Định hướng" cho tôi màn hình trắng khi chạy ứng dụng trên thiết bị thực tế.
CMA

2
"định hướng" hoạt động cho tôi với Ionic 2 trong thiết bị Android.
kamayd

6

Nếu bạn muốn làm điều gì đó theo hướng của mình có nghĩa là bạn muốn thực hiện bất kỳ hành động nào khi thay đổi hướng ứng dụng của mình thì bạn phải sử dụng plugin ionic framework ... https://ionicframework.com/docs/native/screen-orientation/

Nếu bạn chỉ muốn hạn chế ứng dụng của mình ở chế độ dọc hoặc ngang thì bạn chỉ cần thêm những dòng sau vào config.xml của mình

<preference name="orientation" value="portrait" />
                 OR
<preference name="orientation" value="landscape" />

4

Trước tiên, bạn cần thêm Plugin định hướng màn hình Cordova bằng cách sử dụng

cordova plugin add cordova-plugin-screen-orientation

và sau đó thêm screen.lockOrientation('portrait');vào .run()phương thức

angular.module('myApp', [])
.run(function($ionicPlatform) {

    screen.lockOrientation('portrait');
    console.log('Orientation is ' + screen.orientation);

});
})

2

Bên trong góc của bạn, hãy app.jsthêm dòng screen.lockOrientation('portrait');như được hiển thị bên dưới:

một

angular.module('app', ['ionic'])
.run(function($ionicPlatform) {
    // LOCK ORIENTATION TO PORTRAIT.
    screen.lockOrientation('portrait');
  });
})

Bạn cũng sẽ có mã khác trong .runhàm, nhưng cái bạn quan tâm là dòng tôi đã viết. Tôi chưa thêm dòng <preference name="orientation" value="portrait" />vào mã của mình, nhưng bạn có thể cần thêmcordova-plugin-device-orientation


2

Vui lòng thêm android:screenOrientation="portrait"vào androidManifest.xmltệp dưới dạng thuộc tính của thẻ hoạt động cho android.

<activity
        android:name="com.example.demo_spinner.MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait" >
</activity>

1

Trong config.xml, thêm dòng sau

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

0

Bạn có thể thử điều này: -

Plugin Cordova để đặt / khóa hướng màn hình theo cách phổ biến cho iOS, Android, WP8 và Blackberry 10. Plugin này dựa trên phiên bản đầu tiên của Screen Orientation API nên api hiện không khớp với thông số kỹ thuật hiện tại.

https://github.com/apache/cordova-plugin-screen-orientation

hoặc thử mã này trong cấu hình xml: -

<preference name="orientation" value="portrait" />
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.