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/

原文地址:https://www.cnblogs.com/Rampage/p/8692361.html

时间: 2024-08-06 15:03:29

ionic3 关于屏幕方向问题的相关文章

Windows Phone开发(6):处理屏幕方向的改变

俺们都知道,智能手机可以通过旋转手机来改变屏幕的显示方向,更多的时候,对于屏幕方向的改变,我们要做出相应的处理,例如,当手机屏幕方向从纵向变为横向时,可能要重新排列页面上的控件以适应显示区域的变化. 前面我们讨论过,Silverlight for Windows Phone的页面布局有三个常用的布局控件,那么,当屏幕方向改变后,我们所做的对布局的更改基础上是基于这几个容器进行的操作. 本文我将通过三个示例来分别说明. 开始之前,先说一下PhoneApplicationPage类的Orientat

Android自适应屏幕方向、大小和分辨率,及字体设置

屏幕大小 1.不同的layout Android手机屏幕大小不一,有480x320,640x360,800x480.怎样才能让App自动适应不同的屏幕呢? 其实很简单,只需要在 res目录下创建不同的layout文件夹,比如:layout-640x360,layout-800x480,所有的layout文件在编译之后都会 写入R.java里,而系统会根据屏幕的大小自己选择合适的layout进行使用. 2.hdpi.mdpi.ldpi 之前的版本中,只有一个drawable,而2.1版本中有dra

iOS_关于手机支持的屏幕方向

设置支持的屏幕方向有两个级别,一个是app级别的,另一个是viewController级别的. app 级别的可以在[target]-[general]-[device orientation]里面设置,如下图: 默认情况下Upside Down没有勾选,其他都勾选了. (为什么Upside Down不推荐勾选呢,因为iPhone的电话app是不支持Upside Down的,如果你的app支持Upside Down,万一用户在用你的app的时候Upside Down了,这时候来了电话,就会看到整

Android中Activity运行时屏幕方向与显示方式详解

现在我们的手机一般都内置有方向感应器,手机屏幕会根据所处位置自动进行横竖屏切换(前提是未锁定屏幕方向).但有时我们的应用程序仅限在横屏或者竖屏状态下才可以运行,此时我们需要锁定该程序Activity运行时的屏幕方向.还有就是在我们用手机观看视频时,随意的进行横竖屏切换,但播放进度不会随着屏幕的转换而从头开始播放,为了实现这个功能,我们就需要在Activity转换时对当前数据进行保存. 现在根据以上两种需求,个人提出以下解决方案: 一.锁定Activity运行时屏幕方向,如下图(演示锁定横屏):

【Xamarin挖墙脚系列:IOS-关于手机支持的屏幕方向】

设置支持的屏幕方向有两个级别,一个是app级别的,另一个是viewController级别的. app 级别的可以在[target]-[general]-[device orientation]里面设置, 默认情况下Upside Down没有勾选,其他都勾选了. (为什么Upside Down不推荐勾选呢,因为iPhone的电话app是不支持Upside Down的,如果你的app支持Upside Down,万一用户在用你的app的时候Upside Down了,这时候来了电话,就会看到整个来电的

ios开发过程中屏幕方向判断的问题

判断屏幕的方法有很多着及仅提供几个我个人认为好用的方案 Landscape 竖屏 Portrait 横屏 最有效的方法是: 在willRotateToInterfaceOrientation:duration: 方法中将方向存储起来: DrviceOrientation = toInterfaceOrientation; 然后在别的方法中使用相应的屏幕的方向 方法一: 直接获取设备的方法:self.interfaceOrientation(此方法已经过期) 方法二: 通过下面的方法: UIDev

详解Android中的屏幕方向

详解Android中的屏幕方向 屏幕方向 是对Activity而言的,所以你可以在AndroidManifest.xml 文件中,通过<activity> 标记的screenOrientation 属性进行设定,例如: <activity android:name=".SketchpadActivity" android:screenOrientation="landscape"/><!--让该Activity总是显示为横屏-->

屏幕方向该知道的那些事儿

前言 这两天在学关于屏幕旋转的相关的知识,也延伸出了加速器和陀螺仪这些以前没有深入去学习过的知识点,在没有仔细看之前也有一些问题在想,比如:用户关闭了手机的屏幕旋转,但根据我们的使用经验,APP的界面还是可以旋转的,比如那些视屏播放类型的APP,还是可以全屏观看视频的,那这些是怎么做的?还有比如 你整个项目不允许横屏展示的,而某一个控制器却单独要求横屏展示,这个又该怎么做?用户关闭了手机屏幕旋转,我们还能不能判断手机屏幕的方向?带着这些问题我们一个一个的说一下屏幕方向的那些事儿. 从简单的开始

屏幕方向 横竖屏切换

屏幕方向的控制 屏幕方向是对Activity而言的,你可以在AndroidManifest.xml 文件中,通过activity的android:screenOrientation属性进行设定.在此配置的值会反映在Activity的getRequestedOrientation()方法的返回值中,与之对应的setRequestedOrientation()方法可以动态改变该属性的值. 另外, 还可以通过Configuration对象来取得Activity当前的显示方向 取值: unspecifi