ionic3 关于屏幕方向问题

Posted 未曾清贫难成人,不经打击老天真

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ionic3 关于屏幕方向问题相关的知识,希望对你有一定的参考价值。

关于屏幕方向问题

使用ionic-native中的screen-orientation

ionic cordova plugin add cordova-plugin-screen-orientation
npm install --save @ionic-native/screen-orientation
app.module.ts 的 providers 进行引用 ScreenOrientation。

在真机中才会看到效果,可以配合页面的生命周期进行设置,也可以在app.component.ts中全局设置

设置:

import { ScreenOrientation } from ‘@ionic-native/screen-orientation‘;
constructor(private screenOrientation: ScreenOrientation) { }


// get current
console.log(this.screenOrientation.type); // logs the current orientation, example: ‘landscape‘

// set to landscape
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);

// allow user rotate
this.screenOrientation.unlock();

// detect orientation changes
this.screenOrientation.onChange().subscribe(
  () => {
    console.log("Orientation Changed");
  }
);

举例:reportPage【报表页面,需要横屏显示,页面返回后取消锁定】

ionViewWillEnter(){
  this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
}
ionViewWillLeave(){
  this.screenOrientation.unlock();
}
ionViewDidLoad() {

}


锁定方向

portrait-primary Portrait模式, Home键在下边
portrait-secondary Portrait模式, Home键在上边
landscape-primary Landscape模式, Home键在右边
landscape-secondary Landscap模式, Home键在左边
portrait: 所有portrait模式
landscape: 所有landscape模式

官方详细内容
  https://ionicframework.com/docs/native/screen-orientation/

 

以上是关于ionic3 关于屏幕方向问题的主要内容,如果未能解决你的问题,请参考以下文章

关于手机端 手势滑动的方向的判断(方式一)

iOS 8 横向方向问题

移动应用滑动屏幕方向判断解决方案,JS判断手势方向

无论屏幕方向如何,如何获得正确的方位(磁方向)?

iOS 方向在特定屏幕上支持横向和纵向 - 不是所有屏幕

通过方向更改获取屏幕宽度/高度的正确方法是啥?