Question

我正在使用HostListener来更改高度，具体取决于屏幕大小，这是可行的，但是在页面加载期间，“ event.target.innerHeight”稍后会给未定义，我将在更改浏览器高度时得到该值，因此我已经初始化了值。最初，如果用户在大屏幕上浏览，则值不会更改

 Here is the code

  myInnerHeight = 524;         //Laptop screen
  mypaletteHeight = 471;       //Laptop screen

@HostListener('window:resize', ['$event'])
  onResize(event) {
    if (event.target.innerHeight > 680) {
     this.myInnerHeight = 727;     //bigger screen
     this.mypaletteHeight = 674;    //bigger screen
    } else {
      this.myInnerHeight = 524;      //Laptop screen
      this.mypaletteHeight = 471;    //Laptop screen
    }
  }

HTML

<div class="card h-100" [style.min-height.px]="myInnerHeight" >
....
     <div class="sub2" id="sub2" [style.height.px] = "mypaletteHeight">
     .
     .
      </div>
</div>

我正在使用Angular 6和bootstrap 4。

如何在页面加载时获取屏幕尺寸的值。请解决此问题

Answer 1

您尝试过window.screen.height和window.screen.width

要获取文档客户端的宽度和高度，请document.documentElement.clientWidth和document.documentElement.clientHeight

根据angular6中的屏幕尺寸更改高度时面临的问题

1 个答案: