Question

每个人都可以看到，图像顶部有一个空白的状态栏（白色栏）

我的问题：

是否可以在状态栏上使用我的封面（图片）？

我的代码：

profile.ts

<ion-content *ngIf="showLogin == false" no-bounce class="bg-modal">
    <div class="header-image">
        <img src="../assets/imgs/Tkm-resources/Capa.png" onerror="this.src = '../assets/imgs/Tkm-resources/Capa.png'"/>
    </div>

    <div class="main-content" text-wrap text-center>

        <div class="circular">
            <img no-border src="{{ usuario.avatar }}"
                 onerror="this.src='../../assets/imgs/person-flat.png'" (click)="changePicture()"/>
        </div>
        <h6 no-margin padding-top>{{ usuario.nome }}</h6>
        <span color="ticket-grey">{{ usuario.email }}</span>
        <div>
            <ion-row margin-top  (click)="onClickLogout()">
                <ion-icon name="ios-exit" item-left color="primary"></ion-icon>
                <span margin-left> Deslogar</span>
            </ion-row>
        </div>
    </div>
</ion-content>

Answer 1

为了删除空白区域，您可以在meta标签中添加以下内容：

viewport-fit=cover

示例：

<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

Answer 2

使其兼容并删除顶部空白的首选方法是：

将viewport-fit = cover添加到index.html中的视口元标记中，格式为下方：

<meta name="viewport" content="initial-scale=1,user-scalable=no, width=device-width, height=device-height, viewport-fit=cover">

请确保所有参数均正确命名，然后重新检查并确认是否已添加参数。

如果这些参数设置正确，请检查容器视图的填充。

请参阅这些1，2，3，以获取更多信息和清晰度。

如何在Navbar iOS上重叠图像

2 个答案: