Как я могу предотвратить отображение контента над панелью инструментов для телефонов с надрезом, таких как iPhone X? - PullRequest
Новая
       22

Как я могу предотвратить отображение контента над панелью инструментов для телефонов с надрезом, таких как iPhone X?

1 голос
/ 11 мая 2019

У меня есть приложение, которое использует Angular Material Design 2 (в Cordova), имеет панель инструментов и sidenav.На телефонах с надрезом, работающих под управлением iOS (например, iPhone X), когда пользователь прокручивает контент на странице, он виден над панелью инструментов, где находится область надреза.Этого не происходит на моем LG G7, который имеет метку и работает под управлением Android, хотя это могут быть только мои настройки, потому что я думаю, что помню, как "скрывал" метку.

Я в некотором роде доказал, что это не специфично для телефона, взяв пример StackBlitz, который Material Design предоставляет для адаптивного макета и намеренно добавляя в него некоторый запас для создания искусственного пространства.Смотрите здесь: https://stackblitz.com/edit/angular-pdh21g.Когда вы прокручиваете, вы можете видеть, где контент все еще виден над панелью инструментов.Мне интересно, какой CSS мне нужно добавить, чтобы верхний предел содержимого оставался ниже панели инструментов?Я пробовал различные настройки для метатега в моем HTML для подгонки под область просмотра, но, похоже, ничего не изменило.Вот что это сейчас: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Итак, по сути, мне нужно либо заставить верх страницы быть ниже метки, либо заставить контент оставаться ниже панели инструментов.

РЕДАКТИРОВАТЬ: я только что понял, что часть HTML может быть релевантным, потому что он использует «fixedTopGap» - часть этого ниже: 

  <mat-sidenav-container class="example-sidenav-container"
                         [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
                 [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
      <mat-nav-list>
        <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
      <p *ngFor="let content of fillerContent">{{content}}</p>
    </mat-sidenav-content>
  </mat-sidenav-container>
...