Angular 13 应用程序中用于移动设备的主应用程序组件 html 文件中的容器 div 未占据整个视口高度

Question

I am developing an app with Angular 13. It should have a responsive design and should work well in mobile devices. The code in app.component.html file is

<div class="app-header">
  <app-header></app-header>
</div>
<div class="main-container">
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

The code in app.component.scss file is

.app-header {
   min-width: 750px;
}

.main-container {
   min-height: 100vh;
   min-width: 600px;
   background-color: #f7f7f7;
   padding: 0px 75px 50px;
   .content {
      margin: 0 auto;
      max-width: 800px;
      min-width: 600px;
   }
}

The code in the header.component.html ie app-header which is used in app-component is

<div class="header">
   <mat-toolbar>
   </mat-toolbar>
</div>

The code in header.component.scss is

.header {
    .mat-toolbar {
        background: lightgreen;
        color: #FFFFFF;
    }
}

The reason I am following above approach is for my content inside the div with.content class to have minimum width of 600px and maximum width of 800px. This approach looks okay for desktop but for smaller devices the div with.main-container class doesn't occupy full viewport height as shown below.

Also I want header to occupy full screen width by setting width in percentage or viewport width like 100vw rather than using min-width: 750px. Even for.main-container div I added min-width: 600px and would like to replace it with 100vw or something similar. I want it to occupy full screen width irrespective of device. I tried but couldn't achieve the results I wanted. Please help me fix these issues.

Answer 1

I think the first thing you want to rule out is a missing viewport meta tag in the header of your page.

Make sure you have a meta tag similar to this in the page header

<meta name="viewport" content="width=device-width, initial-scale=1">