Troubles for screen.on("orientation-change")

Cocos Creator
#1

Hi, I use latest creator 3.8.1 with web target (web-mobile, web-desktop) and some modern Andorid devices has troubles with listen “orientation-change” event. Some devices never handle that event, some devices catch strange width/height values. I tried to logging this issue from root: found place inside cocos core in package engine/pal/screen-adapter/web/screen-adapter.ts and log inside handler for window.addEventListener(‘orientationchange’ …

Looks like “windowSize” object has incorrect values here, but I don’t know why.

#2

This may have something to do with the browser version? Different devices running the same browser version?

#3

the problem occurs on last brand new devices, samsung and xiaomi, I will provide delailed info soon

#4

sorry for late answer, I found fix, unfortunately I cant provide certain devices and browsers versions, but this case I mentioned above occurs on Samsung and Xiaomi device in theirs native browsers.

Here is my fix, it works fine for all devices:
The class below is just a wrapper to send OrientationChanged event in proper time, also my own event dispatcher used. The main idea is check orientation using new windowSize width/height after 1sec after “window-resize” event fired

import {_decorator, screen} from 'cc';
import {AbstractEventDispatcher} from './Game/Base/AbstractEventDispatcher';

const {ccclass, property} = _decorator;

export enum ScreenOrientationEventEnum
{
    OrientationChanged = "ScreenOrientationEventEnum.OrientationChanged"
}

export enum ScreenOrientationEnum
{
    Vertical = "ScreenOrientationEnum.Vertical",
    Horizontal = "ScreenOrientationEnum.Horizontal"
}

@ccclass('OrientationManager')
export class OrientationManager extends AbstractEventDispatcher<ScreenOrientationEventEnum>
{
    protected readonly ORIENTATION_TIMEOUT: number = 1000;
    protected _orientationTimerId: number;
    protected _lastOrientation: ScreenOrientationEnum = null;

    start()
    {
        screen.on("orientation-change", this.onOrientationChangedHandler, this);
        screen.on("window-resize", this.onWindowResizedHandler, this);

        this.onOrientationChangedHandler();
    }

    protected onWindowResizedHandler(): void
    {
        this.makeTimer();
    }

    protected onOrientationChangedHandler(): void
    {
        this.emitOrientationChanged();
        this.killTimer();
    }

    protected killTimer(): void
    {
        if (this._orientationTimerId)
        {
            clearInterval(this._orientationTimerId);
            this._orientationTimerId = undefined;
        }
    }

    protected makeTimer(): void
    {
        this.killTimer();
        this._orientationTimerId = setTimeout(
            () => this.checkOrientationChanged(),
            this.ORIENTATION_TIMEOUT
        );
    }

    protected checkOrientationChanged(): void
    {
        const changed: boolean = this.orientation != this._lastOrientation;
        if (changed) {
            this.emitOrientationChanged();
        }
    }

    protected emitOrientationChanged(): void
    {
        const {width, height, orientation} = this;
        this.dispatch(ScreenOrientationEventEnum.OrientationChanged, {
            width,
            height,
            orientation
        });
        this._lastOrientation = this.orientation;
    }

    public get orientation(): ScreenOrientationEnum
    {
        return this.width < this.height ? ScreenOrientationEnum.Vertical : ScreenOrientationEnum.Horizontal;
    }

    public get width(): number
    {
        return screen.windowSize.width;
    }

    public get height(): number
    {
        return screen.windowSize.height;
    }
}