如何在 angular 中屏幕尺寸小于平板电脑视图 (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

我认为对于您的用例，您需要使用 outerHeight / outerWidth，因为它不受控制台面板打开或其他因素的影响。所以它非常适合检查平板电脑与桌面电脑。

为了提高效率，您应该使用 Observable 来监听 window.resize 事件，因为它允许您限制观察者逻辑。

这里有一个例子启发by this stackblitz（不是我的）

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();
        })

Answer 2

我对上面的解决方案做了一点修改，然后它就完美地工作了，这也很有效

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);
                }
            });

        }

如何在 angular 中屏幕尺寸小于平板电脑视图 (768 * 1024) 时有效地显示警告框？

How to display alert box when the screen size is lesser than tablet view (768 * 1024) in angular efficiently?

angular

angular5

angular6