当屏幕尺寸小于平板电脑视图(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 事件，因为它允许您限制观察者逻辑。

这是受此堆栈闪电战启发的示例(不是我的(

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