如何解决如何在没有cordova的特定设备上旋转或锁定Ionic页面的方向?
我想锁定方向或旋转整个 ionic 页面,除了 iPad 的所有设备。 我试试这个:
@media (max-width: 1024px) {
body {
transform: rotate(90deg);
}
}
但它不起作用,但如果我尝试这个:
@media (max-width: 1024px) {
ion-card {
transform: rotate(90deg);
}
}
它正在工作,但是我该怎么做才能不必单独旋转每个元素?如何旋转整个页面?
解决方法
使用插件锁定方向: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);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。