Cocos Creator version 3.8.3 System information<

我的设备是IPhone 11, 系统是13.6版本，大概4年前的系统。 <a target="_blank" rel="noopener noreferrer" h

你再稍微往下看几行就能发现问题了，下面没有判断 <a target="_blank" rel="noopener noreferrer" href="https:/

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

mediaQueryPortrait.addEventListener is not a function about cocos-engine HOT 6 CLOSED

a1076559139 commented on July 19, 2024

mediaQueryPortrait.addEventListener is not a function

from cocos-engine.

Comments (6)

minggo commented on July 19, 2024

Could i know how to reproduce it?

from cocos-engine.

a1076559139 commented on July 19, 2024

我的设备是IPhone 11, 系统是13.6版本，大概4年前的系统。

报错原因是用了matchMedia，并且调用它的addEventListener方法，我抓它的报错了，确实没有addEventListener方法。

虽然addListener被标记为已启用，但一些系统钉子户，仍然不支持最新的addEventListener方法。

我目前的临时兼容处理(window上的addEventListener可用，new EventTarget不可用)：

// 兼容某些旧机型，无法使用MediaQueryList.prototype.addEventListener
if ('function' == typeof window.matchMedia) {
    const matchMedia = window.matchMedia;
    window.matchMedia = function (query: string): MediaQueryList {
        const res = matchMedia.call(window, query) as MediaQueryList;
        if (!res.addEventListener && res.addListener) {
            const callback = function (this: MediaQueryList, ev: MediaQueryListEvent) {
                window.dispatchEvent(new Event('matchMedia:' + ev.type, {
                    bubbles: ev.bubbles,
                    cancelable: ev.cancelable,
                    composed: ev.composed
                }));
            };
            let listenerAdded = false;
            res.addEventListener = function (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) {
                window.addEventListener('matchMedia:' + type, listener, options);
                if (listenerAdded === false) {
                    listenerAdded = true;
                    res.addListener(callback);
                }
            };
            res.removeEventListener = function (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) {
                window.removeEventListener('matchMedia:' + type, listener, options);
            };
        }

        return res;
    };
}

from cocos-engine.

minggo commented on July 19, 2024

我搜索了代码，screen-adapter.ts 里用到了 window.matchMedia

if (typeof window.matchMedia === 'function') {
            const updateDPRChangeListener = (): void => {
                const dpr = window.devicePixelRatio;
                // NOTE: some browsers especially on iPhone doesn't support MediaQueryList
                window.matchMedia(`(resolution: ${dpr}dppx)`)?.addEventListener?.('change', (): void => {
                    this.emit('window-resize', this.windowSize.width, this.windowSize.height);
                    updateDPRChangeListener();
                }, { once: true });
            };
    ...
}