Question

这是我第一次询问有关stackoverflow的问题，所以我会尝试尽可能具体。谢谢你的帮助。

目前我正在使用Angular / IONIC解决方案为Androïd和IOS开发应用程序。

实际上我已经使用cordova-plugin-screen-orientation 1.4.2版本插件开发了一项服务来改变某些视图的屏幕方向。事实上，这对两个操作系统都完美有效。但是我也需要在完成后抓住设备的宽度和高度。

所以有我的问题。在Android上一切正常，但在IOS上，看起来当我改变方向时，我总是抓住旧值。（如果我改变了风景，我会捕捉到之前的人像方向值。）

我尝试了更为简单的不同方法：更改方向以及何时完成捕获值。

目前我正在尝试使用观察者，但结果相同。

这是我的代码：

class WindowService extends Service {
constructor($resource,$config, $window, Watcher) {
    'ngInject';
    super();

    this.orientations = {
        1:"portrait",
        2:"landscape"
    }

    //imported library
    this.md = new MobileDetect($window.navigator.userAgent);
    // if it's a tablet Android, md.tablet() != null && md.os() == 'AndroidOS'
    // if it's an iPad md.tablet() == 'iPad'
    // if it's an iPhone md.mobile() == 'iPhone'
    // if it's an Android phone, md.phone() != null && md.os() == 'AndroidOS'
    console.log("md > ", this.md.mobile());

    this.maxHeight = "100vh";
    this.maxWidth = "100vw";
    if (this.isAndroid()){
        this.maxHeight = $window.innerHeight + "px";
        this.maxWidth = $window.innerWidth + "px";

        this.maxHeightWatcher = Watcher.watch(() => $window.innerHeight, innerHeight => {
            this.maxHeight = $window.innerHeight + "px";
            this.maxWidth = $window.innerWidth + "px";
        });
    }
}

setOrientation(){
    this.invoke(($window) => {
        if ($window.screen.unlockOrientation){
            $window.screen.unlockOrientation();
            if ((this.md.phone() != null && this.md.os() == 'AndroidOS') || this.md.mobile() == 'iPhone'){
                $window.screen.lockOrientation('portrait');
            }else if ((this.md.tablet() != null && this.md.os() == 'AndroidOS') || this.md.tablet() == 'iPad'){
                $window.screen.lockOrientation('landscape');
            }else {
                $window.screen.lockOrientation('landscape');
            }
        }
    });
}

//THIS S THE FUNCTION I CALL
changeOrientation(orientationId){
    this.invoke(($window) => {
        this.lockScreenOrientation($window, orientationId).then(res => {
            console.log("changeOrientation > ", res);
        }).catch(err => {
            console.log("changeOrientation > ", err);
        });
    });
}

lockScreenOrientation($window, orientationId){
    if (this.orientations[orientationId] != undefined){
        if (this.orientations[orientationId] != $window.screen.orientation){
            if ($window.screen.unlockOrientation){
                    $window.screen.unlockOrientation();
                    console.log("lockOrientation > ", $window.screen.lockOrientation(this.orientations[orientationId]));
                    return Promise.resolve(this.orientations[orientationId]);
            }else{
                return Promise.reject("[ERROR] cordova-plugin-screen-orientation hadn't been loaded.")
            }
        }else{
            return Promise.resolve(this.orientations[orientationId]);
        }
    }else{
        return Promise.reject("[ERROR] The orientation specified is Unknown.")
    }
}

getDevice(){
    if ((this.md.phone() != null && this.md.os() == 'AndroidOS')){
        return "Android Smartphone";
    }else if (this.md.mobile() == 'iPhone'){
        return "iPhone";
    }else if ((this.md.tablet() != null && this.md.os() == 'AndroidOS')){
        return "Android Tablet";
    }else if (this.md.tablet() == 'iPad'){
        return "iPad";
    }else
        return "Unknown";
}

isSmartphone(){
    if ((this.md.phone() != null && this.md.os() == 'AndroidOS') || this.md.mobile() == 'iPhone'){
        return true;
    }
    return false;
}

isTablet(){
    if ((this.md.tablet() != null && this.md.os() == 'AndroidOS') || this.md.tablet() == 'iPad')
        return true;
    return false;
}

isIOS() {
    if (this.md.mobile() == 'iPhone' || this.md.tablet() == 'iPad')
        return true;
    return false;
}

isAndroid() {
    if ((this.md.phone() != null && this.md.os() == 'AndroidOS')
        || (this.md.tablet() != null && this.md.os() == 'AndroidOS'))
        return true;
    return false;
}

getMaxHeight(){
    return this.maxHeight;
}

getMaxWidth(){
    return this.maxWidth;
}

} Service.register（WindowService）;

<ion-side-menu-content drag-content="false" ng-controller="HeaderController" style="height:{{view.maxHeight}};width: {{view.maxWidth}};"> 

    ....

</ion-side-menu-content>

类Watcher只是角度基本观察者的一个小扩展。它的工作方式相同。

[编辑]抱歉，我忘了指定一些内容：正如你在js代码中看到的那样，在构造函数方法中，如果它是IOS，我只需要将100vh fr和高度100vw放在一起。我也有相同的结果：从纵向到横向的变化保持了纵向尺寸值。

IOS上的IONIC / AngularJs - 更改屏幕方向时内部宽度和内部高度错误

0 个答案: