Как отобразить окно с предупреждением, если размер экрана меньше, чем у планшета (768 * 1024), в угловом режиме?

Question

Для достижения вышеизложенного, то есть, чтобы отобразить окно предупреждения, когда размер экрана меньше, чем (768 * 1024), как я сделал ниже

@HostListener("window:resize", ["$event"]) 
onResize(event) {
     if (event.target.innerWidth < 1024 || event.target.innerHeight < 768) {
        alert( "outer height" + event.target.outerHeight + "," + event.target.outerWidth);
        alert("inner height" + event.target.innerWidth + "," + event.target.innerHeight);
    } 
}

Я не уверен, что похоже на размер экрана, я дал внутреннюю высоту, но все же он немного отличается.

Так, как я могу сделать вышеупомянутое правильно и эффективно?

Любая помощь будет оценена. Спасибо!

Answer 1

Я немного изменил вышеупомянутое решение, и тогда оно отлично работает, и это тоже эффективно

let windowDimensions = () => {
        let dimensions = {
            width: window.innerWidth,
            height: window.innerHeight
        };
        return dimensions;
    };

    constructor() {
            let resizeEvtObs = fromEvent(window, "resize")
            .pipe(debounceTime(1000),
                map(windowDimensions));

            resizeEvtObs.subscribe(val => {
                this.windowWidth = val.width;
                this.windowHeight = val.height; 
                if (console) {
                    console.log("Dimensions updated to", this.windowWidth, this.windowHeight);
                }
            });

        }

Answer 2

Я думаю, что для вашего случая использования вам нужно использовать externalHeight / outerWidth, так как это не зависит от открытия панели консоли или чего-то еще. Так что очень подходит для проверки планшет против рабочего стола.

А для эффективности вы должны использовать Observable для прослушивания события window.resize, так как оно позволяет регулировать логику наблюдателя.

Вот пример, вдохновляющий этим стеком бликов (не мой)

Observable.fromEvent(window, 'resize')
        .auditTime(100) // <- or whatever timer you want
        .map(event => <WindowSize>{ 
          width: event['currentTarget'].outerWidth, 
          height: event['currentTarget'].outerHeight
        })
        .filter(windowSize => windowSize.width < 1024 || windowSize.height < 768)
        .subscribe((windowSize) => {
            // this callback we be called only if size is less than tablet view
            doSomeStuff();
        })