Css 在ios设备上与登录表单重叠的页脚（Safari+；Chrome）

我正在使用angular 8和angular材质。我设计了一个功能齐全的登录页面。我面临的问题是，在IOS设备上，如iphone和iPad，要么是safari，要么是chrome，页脚与登录表单重叠。另一方面，在我的macbook上，它在google chrome上运行良好，但在safari上同样存在页脚问题。在这方面有人能帮我吗

我尝试了@media query，google simulator显示了完美的响应，但在实际设备上并不像google device simulator显示的那样

<div class="login-page-background"> 
  <div class="bg-image" fxLayout="column" >
      <video  id="bgVideo" [autoplay]="true" [muted]="true" [loop]="true">
          <source src="/assets/login.webm" type="video/webm">
        </video>


    <div class="login-page-header" fxLayoutAlign="center center">
        <a href="../login">
          <img style="height: 70px; margin-top: 20px" src="../assets/logoedited.png">
        </a>
    </div>

    <div fxFlex fxLayout="column" style="margin-top: 20px">
      <div>

        <form [formGroup]="loginForm" (ngSubmit)="login()"  fxLayoutAlign="space-evenly center" >
          <mat-card style="padding:35px; box-shadow:1px 1px 2px 1px rgba(45, 45, 45);; background: bottom ">
            <mat-card-title>
             <p style="font-size: medium; color: black"> Anmelden mit Ihrer Fioretto Systems ID </p>
            </mat-card-title>

            <mat-card-content fxLayout="column">
              <div *ngIf="loginError" style="color: red">
                Ungültiger Benutzername und oder Passwort
              </div>


            <mat-form-field>
              <input type="email" matInput placeholder="E-Mail*"  formControlName="username" >
                <div *ngIf="loginForm.controls.username.touched && loginForm.controls.username.errors">
                  <mat-error *ngIf="loginForm.controls.username.errors.email">
                    Geben Sie eine gültige E-Mail ein
                  </mat-error>
                  <mat-error *ngIf="loginForm.controls.username.errors.required">
                    E-Mail ist <strong>erforderlich</strong>
                  </mat-error>
                </div>

            </mat-form-field>

            <br>

            <mat-form-field>
              <input matInput type="password" formControlName="password" placeholder="Passwort*" [type]="hide ? 'password' : 'text'">
                <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
                  <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                </button>
                <div *ngIf="loginForm.controls.password.touched && loginForm.controls.password.errors">
                    <mat-error *ngIf="loginForm.controls.password.errors.required">
                      Passwort ist <strong>erforderlich</strong>
                    </mat-error>
                </div>

            </mat-form-field>

            <div fxLayout="row" style="margin-top:15px" fxLayout="center center">


              <div fxFlex="50">
                <re-captcha (resolved)="resolved($event)" siteKey="6Lf617IUAAAAAPAj1hFPJ48dHR7b_AXvJWlllYdh"></re-captcha>

                <div *ngIf="captchaError" style="color: red">
                  <strong>reCaptcha validieren</strong>
                </div>
              </div>
            </div>
            </mat-card-content>
            <mat-card-actions style="text-align:right; margin-right: 0px">
              <button type="submit" style="background:#184397" mat-raised-button color="primary">Login</button>
              <br>
              <a href="../login/"> <p style="color: #184397">Passwort vergessen</p></a>
            </mat-card-actions>
            </mat-card>
        </form>
      </div>


      <div class="login-page-header" fxLayout="column" fxLayoutAlign="center center">
        <a href="https://fioretto-group.com/" target="blank">
          <img  src="../assets/FiorettoGroup.png" style= "width:380px;height:auto">
         </a>
      </div>
    </div>

    <div fxFlex>
        <div *ngIf="loading">
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        </div>
    </div>
    <div fxFlex></div>

    <div class="app-footer">
      <div fxLayout="row wrap" fxLayout.sm="column" fxLayout.xs="column">

        <a fxFlex="33" href="https://mek-finanz.de/" target="blank" >
          <img class="prtnr-cmp-img"  src="../assets/logo's-04.png" >
        </a>

        <a fxFlex="33"  href="https://fioretto-immobilien.de/" target="blank">
          <img class="prtnr-cmp-img" src="../assets/logo's-02.png" >
        </a>

        <a fxFlex="33" href="https://birema.herokuapp.com/index.html" target="blank" >
          <img class="prtnr-cmp-img"  src="../assets/BIR-07.png" >
        </a>

        <a fxFlex="33" href="https://fioretto-media.herokuapp.com/index.html" target="blank">
          <img class="prtnr-cmp-img"  src="../assets/FIORETTO-MEDIA.png" >
        </a>

        <a fxFlex="33" href="https://airmage.herokuapp.com/index.html" target="blank">
          <img class="prtnr-cmp-img"  src="../assets/logo's-06.png" >
        </a>

        <a fxFlex="33"  href="https://horai-detektei.de/" target="blank">
          <img class="prtnr-cmp-img"  src="../assets/logo's-03.png" >
        </a>

        <a fxFlex="33" href="https://vario-import.com/" target="blank">
          <img class="prtnr-cmp-img"  src="../assets/logo's-05.png" >
        </a>

        <a fxFlex="33" href="https://sterbe-vorsorge.de/" target="blank">
          <img class="prtnr-cmp-img"  src="../assets/logo's-09.png" >
        </a>

        <a fxFlex="33" href="https://animatixs.herokuapp.com/index.html" target="blank" >
          <img class="prtnr-cmp-img" src="../assets/logo's-01.png">
        </a>

      </div>


      <div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign="center center">

            <p  class="footer-links"  style="font-size: small; margin-top: 10px"> © 2019 Fioretto GmbH & Co. KG | </p>

          &nbsp;

          <a [routerLink]="['/data-policy']" [queryParams]="{ id: '0'}" target="blank">
              <p  class="footer-links"  style="font-size: small; margin-top: 10px"> Impressum | </p>
          </a>

          &nbsp;

          <a [routerLink]="['/data-policy']" [queryParams]="{ id: '1'}" target="blank">
                <p  class="footer-links"  style="font-size: small; margin-top: 10px"> Datenschutzbestimmungen | </p>
          </a>

          &nbsp;

          <a [routerLink]="['/data-policy']" [queryParams]="{ id: '2'}" target="blank">
              <p  class="footer-links"  style="font-size: small; margin-top: 10px">Cookies | </p>
          </a>

          &nbsp;

          <a [routerLink]="['/data-policy']" [queryParams]="{ id: '3'}" target="blank">
              <p class="footer-links" style="font-size: small; margin-top: 10px"> Nutzungsbedingungen</p>
          </a>
      </div>

    </div>
  </div>
  </div>

---

这是因为您正在为小屏幕设备的

.app footer

使用

position:absulte

。您应该让

.app footer

与正常文档流保持一致。

位置：Absolute

从正常流中删除

.app footer

，并将其从底部放置

0px

，无论发生什么情况。由于页脚是在表单之后定义的，因此页脚堆叠在表单上方，与表单重叠。

问题也只是在IOS设备上，而不是在androidI上。我希望您尝试从媒体查询中删除

位置

和

底部

属性？iOS设备通常具有更高分辨率的视网膜显示器，而Android设备可能并非如此。尝试检查同一媒体查询是否适用于两台设备。您的Android设备可能只是调用

max width:700px

查询，但您的iOS设备不是。问题从上面的

768px

开始。是的，我试图删除position和bottom属性，但遇到了相同的问题。更多信息和其他有此问题的人。问题是高度为100vh。使用100%可以解决问题

.login-page-background{
/* background-image: url('src\assets\newbackground.gif'); */
width: 100%;
height: 100vh;
background-position: center;
overflow: auto;
background-size: cover;
overflow-x: hidden;
}

.login-page-header{
height: 110px;
}

.fioretto-image{
padding: 0px;
width: 100vh;
}

.prtnr-cmp-img{
filter: grayscale(100%);
width: 220px; 
height:36px;
margin: 15px 0px;
}

.prtnr-cmp-img:hover {
filter: contrast(150%);
}

.footer-links{
color: black;
}

video#bgVideo {
  position: fixed; 
  top: 0px; 
  left: 0px; 
  min-width: 100%;
  min-height: 100%;
  z-index: -1; 
}

@media only screen and (max-width : 700px){
  video {
  position: fixed;
  }
  /* .bg-image{
    background-image: url('/assets/aaaa.png');
  } */

}

/* IPad Pro */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {
  .app-footer{
      position: absolute;
      bottom: 0px;
  }
  }

/* IPad */
@media only screen and (min-device-width :768px) and (max-device-width : 1024px) and (orientation : landscape) {
  .app-footer{
      position: inherit;
      bottom: 0px;
  }
  }
.app-footer{
width: 100%;
text-align: center;
background-color:rgb(46, 48, 52);
height: auto;
opacity: 0.5;
background:rgb(195, 198, 204);
padding: 10px;
position: inherit;
bottom: 0px;
}