如何在没有cordova的特定设备上旋转或锁定Ionic中的页面方向？答案

【问题标题】：How to rotate or lock orientation a page in Ionic on specific device without cordova?如何在没有cordova的特定设备上旋转或锁定Ionic中的页面方向？
【发布时间】：2021-06-04 06:16:38
【问题描述】：

我想锁定方向或旋转整个 ionic 页面，所有设备都适用于 iPad。我试试这个：

@media (max-width: 1024px) {
  body {
  transform: rotate(90deg);
  }
}

但它不起作用，但如果我试试这个：

@media (max-width: 1024px) {
  ion-card {
  transform: rotate(90deg);
  }
}

它正在工作，但我怎样才能不必分别旋转每个元素？如何旋转整个页面？

【问题讨论】：

标签： css angular ionic-framework sass rotation

【解决方案1】：

要锁定方向，请使用插件：https://ionicframework.com/docs/native/screen-orientation

如果只想在特定页面锁定方向，在构造函数中锁定，页面销毁时解锁：

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

constructor(private screenOrientation: ScreenOrientation) {
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
}

ngOnDestroy {
    this.screenOrientation.unlock();
}

要检测 iPad，取决于您用来确定设备是 iPad 的标准，我看到您只使用屏幕尺寸。因此，“iPad”是指任何平板电脑或大型设备。

在这种情况下，您可以使用代码中的 Platform 类来获取屏幕尺寸：

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { Platform } from '@ionic/angular';

constructor(private screenOrientation: ScreenOrientation,
            private platform: Platform) {

    if (this.platform.width() < 1024) {
        this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
    }
}

【讨论】：

我收到此错误：无法解析 f:/.../.../.../MyApp/src/app/pages/detail/detail 中 DetailPage 的所有参数.page.ts：（？）。我添加了详细信息页面的提供者
您是否已将插件添加到您的 app.module.ts > providers 中？
再次运行 ionic serve 已解决问题，但随后出现此错误：NotSupportedError: screen.orientation.lock() is not available on this device.
这很正常，这是一个原生插件，你只能在真实设备（你的手机）中测试它，不能在使用 ionic serve 的浏览器中测试。在浏览器上运行时，您会在带有插件的控制台中收到这些错误，您不必担心。