Нестандартная проблема высоты заголовка в ioni c 4, которая перекрывается с содержимым в iPhone X - PullRequest
Новая
       32

Нестандартная проблема высоты заголовка в ioni c 4, которая перекрывается с содержимым в iPhone X

0 голосов
/ 06 января 2020

Здесь я задаю настраиваемую высоту заголовка, которая вызывает проблемы у различных типов ios устройств, таких как устройства с кнопками и без устройств кнопок. Я имею в виду iPhone X (без кнопочного устройства) и iPhone8 (с кнопочным устройством).

Здесь я прилагаю скриншот для получения более подробной информации ... Мой контент находится рядом с заголовком в iphone x

enter image description here

Здесь я использую приведенный ниже код для увеличения высоты заголовка. Если я использую обычный заголовок, который предоставляется по умолчанию ioni c, то это не проблема.

HTML file 

<ion-header class="home-header">
  <ion-toolbar>
    <ion-title class="padd0">
      <div class="flex-header">
        <div class="flex-header-child menu_btn">
          <ion-buttons slot="start" class="menu-btn">
            <ion-menu-button color="medium">
              <div class="bar-menu">
                <span class="bar-single"></span>
                <span class="bar-single"></span>
                <span class="bar-single"></span>
              </div>
            </ion-menu-button>
          </ion-buttons> 
        </div>
        <a [routerLink]="['/']" routerDirection="forward" class="ibp-logo logo1 active flex-header-child">
          <img src="../assets/images/logo.png" class="img-responsive" alt="" title="">
        </a>
        <span>&nbsp;</span>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="v4 home-content">
...
</ion-content>

. css file 

.home-header,.home-header>*,.home-header ion-title, .home-header .flex-header,ion-toolbar, ion-header 
{
    height:60px;
    --height:60px;
    --min-height: 60px;
    min-height:60px;
    --max-height: 60px;
    max-height: 60px;
    background:#cfb57e;
    --background:#cfb57e;
}
...