Ionic 2 - 仅适用于 iPad 的横向方向

Posted 2023-03-13

【中文标题】Ionic 2 - 仅适用于 iPad 的横向方向

【英文标题】：Ionic 2 - Landscape orientation enabled for iPad only

【发布时间】：2017-08-28 00:15:27

【问题描述】：

我可以在config.xml 中将方向设置为仅纵向，如下所示：

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

但是我怎样才能允许 iPad 版本的横向，同时仍然像上面那样禁用 iPhone？

【问题讨论】：

请参考这个帖子：***.com/questions/34783909/…

【参考方案1】：

根据 Ionic 的 Mike Harrison 所说，他说：

除了手动旋转设备，不是真的。这将是 你会写一个插件来修改主 App 视图的东西 科尔多瓦

但是有一个 Plugin from Ionic 1 .看它。最终你也可以在 Ionic 2 中使用它。

使用此插件，您可以执行以下操作：

if(/(ipad)/i.test(navigator.userAgent)) 
  //THIS IS THE PLUGIN IONIC 1 CODE 
  $scope.changeOriantationPortrait = function() 
            screen.lockOrientation('portrait');
           

【参考方案2】：

您可以从 config.xml 中删除首选项并通过本机插件 Screen Orientation 定义它

然后在app.component.ts 锁定手机方向：

        // check if platform is not a tablet
        if (platform.is('cordova') && !platform.is('tablet')) 
            // lock orientation to only portrait mode
            this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
            // set screen orientation to 'portrait'
            globalProvier.screenOrientation = this.screenOrientation.ORIENTATIONS.PORTRAIT;
         else  // if it's tablet
            // set device type to 'tablet'
            globalProvier.deviceType = platform.platforms()[3];
            // set current orientation type ('portrait-primary' or 'landscape-primary' or 'portrait-secondary' or landscape-secondary)
            globalProvier.screenOrientation = this.screenOrientation.type;
            // set listener on changing orientation
            this.screenOrientation.onChange().subscribe(
                () => 
                    globalProvier.screenOrientation = this.screenOrientation.type;
                    console.log("Orientation Changed to: ", this.screenOrientation.type);
                
            );
        

现在您可以使用 globalProvier.screenOrientation 变量根据平板电脑方向动态调整布局。在模板中添加类或使用 *ngIf。

*ngIf='this.globalProvider.screenOrientation == "landscape-primary" || <h3 *ngIf='this.globalProvider.screenOrientation == "landscape-primary" || this.globalProvider.screenOrientation == "landscape-secondary"'>Orientation: landscape</h3>