Ionic 4 App在iOS上的外观与在Android和Web上的外观不同

Question

因此我们正在使用Ionic Framework制作应用程序，并且该应用程序在iOS上的外观与在Android和网络上的外观不同。How it looks on iOS

How It Looks On Other Platforms

这在带有大多数标题的应用程序的大多数页面上发生。这是我在此示例中显示的页面的html和CSS。

<ion-header>
  <ion-toolbar>
    <ion-title>Main</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content *ngIf="layoutService.style == 'island'">
    <img class="backimg" *ngIf="backService.blur == 'n'" [src]="backService.mainBackground" style="filter: blur(0px)" />
    <img class="backimg" *ngIf="backService.blur == 's'" [src]="backService.mainBackground" style="filter: blur(2px)" />
    <img class="backimg" *ngIf="backService.blur == 'm'" [src]="backService.mainBackground" style="filter: blur(4px)" />
    <img class="backimg" *ngIf="backService.blur == 'l'" [src]="backService.mainBackground" style="filter: blur(8px)" />

    <img class="dimimg" *ngIf="backService.opacity == 's'" src="assets/backgrounds/black.jpg" style="filter: opacity(25%)" />
    <img class="dimimg" *ngIf="backService.opacity == 'm'" src="assets/backgrounds/black.jpg" style="filter: opacity(50%)" />
    <img class="dimimg" *ngIf="backService.opacity == 'l'" src="assets/backgrounds/black.jpg" style="filter: opacity(75%)" />

    <!--<video autoplay loop src="assets/video/blossoms2.mp4"></video>-->
    <ion-card class="card">
        <ion-card-content text-center class="changecolor">
            <ion-grid>
                <ion-row>
                    <ion-col no-padding size="3" offset="1">
                        <img no-padding style="height: auto; width: auto" src="assets/YardLogo_BestTransparent.png" />
                    </ion-col>
                    <ion-col no-padding size="8">
                        <!--<ion-title no-padding class="big shadow" [style.color]="backService.titleColor" text-left><strong>The Yard:</strong></ion-title>-->
                        <!--<ion-title no-padding class="shadow" [style.color]="backService.titleColor" text-left>HU Unfiltered...</ion-title>-->
                        <ion-title no-padding class="big shadow" text-left><strong>The Yard:</strong></ion-title>
                        <ion-title no-padding class="shadow" text-left>HU Unfiltered...</ion-title>
                    </ion-col>
                </ion-row>
            </ion-grid>           
        </ion-card-content>
    </ion-card>
    <ion-grid class="indexer" *ngIf="firstload == true">
        <ion-title class="simple indexer shadow" text-center>Choose Layout:</ion-title>
        <ion-row>
            <ion-col size="4">
                <ion-button expand="block" (click)="changeToIsland()" color="primary">
                    Island
                </ion-button>
            </ion-col>
            <ion-col size="4">
                <ion-button expand="block" (click)="changeToMinimal()" color="primary">
                    Minimal
                </ion-button>
            </ion-col>
            <ion-col size="4">
                <ion-button expand="block" (click)="changeToDefault()" color="primary">
                    Default
                </ion-button>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <ion-button expand="block" (click)="saveLayout()" color="primary">
                    Save Layout
                    <ion-icon name="save"></ion-icon>
                </ion-button>
                <ion-label class="extra-info" position="stacked">Can Be Changed Later In Settings.</ion-label>
            </ion-col>
        </ion-row>
    </ion-grid>
    <ion-grid class="indexer">
        <ion-row>
            <ion-col size="8" offset="2">
                <ion-title class="simple indexer spacing shadow" text-left>Campus News:</ion-title>
                <!--<ion-item class="going"><p text-center>_____________________________________________</p></ion-item>-->
                <div *ngFor="let post of news">
                    <div class="vid">
                        <ion-item class="going indexer">
                            <p class="simple" slot="start"><strong>{{post.title}}</strong></p>
                            <p slot="end"><ion-label text-right class="simple">{{post.datePosted}}</ion-label></p>
                        </ion-item>
                        <ion-item class="going2 indexer">
                            <p class="simple">{{post.body}}</p>
                        </ion-item>
                    </div>
                    <ion-item-divider></ion-item-divider>
                </div>
                <ion-item text-center class="going changecolor shadow indexer"><ion-title>#DailyQuote</ion-title></ion-item>
                <ion-item class="going shadow indexer"><p text-center>{{quote}}</p></ion-item>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

<ion-content *ngIf="layoutService.style == 'minimal'">
    <img class="backimg" [src]="minBackService.mainBackground" style="filter: blur(0px)" />

    <!--<video autoplay loop src="assets/video/blossoms2.mp4"></video>-->
    <ion-grid class="indexer">
        <ion-row>
            <ion-col no-padding size="3" offset="2">
                <img no-padding style="height: auto; width: auto; min-height: 60px;" src="assets/YardLogo_BestWhiteTransparent.png" />
            </ion-col>
            <ion-col no-padding size="7">
                <!--<ion-title no-padding class="big shadow" [style.color]="backService.titleColor" text-left><strong>The Yard:</strong></ion-title>-->
                <!--<ion-title no-padding class="shadow" [style.color]="backService.titleColor" text-left>HU Unfiltered...</ion-title>-->
                <ion-title no-padding class="changecolor big" text-left><strong>The Yard:</strong></ion-title>
                <ion-title no-padding class="changecolor" text-left>HU Unfiltered...</ion-title>
            </ion-col>
        </ion-row>
    </ion-grid>
    <ion-grid class="indexer" *ngIf="firstload == true">
        <ion-title class="simple indexer" text-center>Choose Layout:</ion-title>
        <ion-row>
            <ion-col size="4">
                <ion-button expand="block" (click)="changeToIsland()" color="dark">
                    Island
                </ion-button>
            </ion-col>
            <ion-col size="4">
                <ion-button expand="block" (click)="changeToMinimal()" color="dark">
                    Minimal
                </ion-button>
            </ion-col>
            <ion-col size="4">
                <ion-button expand="block" (click)="changeToDefault()" color="dark">
                    Default
                </ion-button>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <ion-button expand="block" (click)="saveLayout()" color="dark">
                    Save Layout
                    <ion-icon name="save"></ion-icon>
                </ion-button>
                <ion-label class="minextra-info" position="stacked">Can be changed later in settings.</ion-label>
            </ion-col>
        </ion-row>
    </ion-grid>
    <ion-grid class="indexer">
        <ion-row>
            <ion-col size="8" offset="2">
                <ion-title class="simple indexer spacing" text-left>Campus News:</ion-title>
                <!--<ion-item class="going"><p text-center>_____________________________________________</p></ion-item>-->
                <div *ngFor="let post of news">
                    <div class="minvid">
                        <ion-item class="going indexer">
                            <p class="simple" slot="start"><strong>{{post.title}}</strong></p>
                            <p slot="end"><ion-label text-right class="simple">{{post.datePosted}}</ion-label></p>
                        </ion-item>
                        <ion-item class="going2 indexer">
                            <p class="simple">{{post.body}}</p>
                        </ion-item>
                    </div>
                    <ion-item-divider></ion-item-divider>
                </div>
                <ion-item text-center class="going changecolor indexer"><ion-title>#DailyQuote</ion-title></ion-item>
                <ion-item class="going indexer"><p text-center>{{quote}}</p></ion-item>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>


<ion-content *ngIf="layoutService.style == 'default'">

    <!--<video autoplay loop src="assets/video/blossoms2.mp4"></video>-->
    <ion-card class="">
        <ion-card-content text-center>
            <ion-grid>
                <ion-row>
                    <ion-col no-padding size="3" offset="1">
                        <img no-padding style="height: auto; width: auto" src="assets/YardLogo_BestRedTransparent.png" />
                    </ion-col>
                    <ion-col no-padding size="8">
                        <!--<ion-title no-padding class="big shadow" [style.color]="backService.titleColor" text-left><strong>The Yard:</strong></ion-title>-->
                        <!--<ion-title no-padding class="shadow" [style.color]="backService.titleColor" text-left>HU Unfiltered...</ion-title>-->
                        <ion-title no-padding class="big defchangecolor" text-left><strong>The Yard:</strong></ion-title>
                        <ion-title no-padding class="" style="color: black; font: medium; padding-left: 10px;" text-left>HU Unfiltered...</ion-title>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-card-content>
    </ion-card>
    <ion-grid class="indexer" *ngIf="firstload == true">
        <ion-title class="" text-center>Choose Layout:</ion-title>
        <ion-row>
            <ion-col size="4">
                <ion-button expand="block" (click)="changeToIsland()" color="success">
                    Island
                </ion-button>
            </ion-col>
            <ion-col size="4">
                <ion-button expand="block" (click)="changeToMinimal()" color="success">
                    Minimal
                </ion-button>
            </ion-col>
            <ion-col size="4">
                <ion-button expand="block" (click)="changeToDefault()" color="success">
                    Default
                </ion-button>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <ion-button expand="block" (click)="saveLayout()" color="success">
                    Save Layout
                    <ion-icon name="save"></ion-icon>
                </ion-button>
                <ion-label class="defextra-info" position="stacked">Can be changed later in settings.</ion-label>
            </ion-col>
        </ion-row>
    </ion-grid>
    <ion-grid class="indexer">
        <ion-row>
            <ion-col size="10" offset="1">
                <ion-title class="" text-left>Campus News:</ion-title>
                <!--<ion-item class="going"><p text-center>_____________________________________________</p></ion-item>-->
                <ion-card *ngFor="let post of news">
                    <ion-card-content class="">
                        <ion-item color="medium">
                            <p class="simple" slot="start"><strong>{{post.title}}</strong></p>
                            <p slot="end"><ion-label text-right class="simple">{{post.datePosted}}</ion-label></p>
                        </ion-item>
                        <ion-item color="" class="">
                            <p class="">{{post.body}}</p>
                        </ion-item>
                    </ion-card-content>
                    <ion-item-divider></ion-item-divider>
                </ion-card>

            </ion-col>
        </ion-row>
    </ion-grid>
    <ion-item text-center class="defchangecolor"><ion-title>#DailyQuote</ion-title></ion-item>
    <ion-card>
        <ion-card-content>
            <ion-item class=""><p text-center>{{quote}}</p></ion-item>
        </ion-card-content>
    </ion-card>
</ion-content>

这里是CSS：

ion-header {
    --ion-background-color: rgba(128, 128, 128, 0.0);
    text-align: center;
}

/*ion-content {
    --background: url('/assets/color_background1.jpeg') 100%;
}*/

video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%);
    filter: opacity(20%);
    //filter: brightness(200%);
}

.backimg {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
    //filter: brightness(75%);
    //filter: brightness(200%);
}

.dimimg {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%);
    //filter: brightness(75%);
    //filter: brightness(200%);
}

.indexer {
    z-index: 2;
    position: relative;
}

.card {
    --background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    --border-radius: 20px;
    //border-style: solid;
    //border-color: white;
    color: white;
    --box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.top {
    --ion-background-color: rgba(0, 0, 0, 0.75);
    --border-radius: 15px;
    //border-style: solid;
    //border-color: white;
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    color: white;
    --box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.3);
}

.big {
    font-size: x-large;
    font-weight: bolder;
    //text-decoration: underline;
}

.spacing {
    padding-bottom: 10px;
    padding-top: 10px;
}

ion-item-option {
    --background: rgba(255, 255, 255, 0.5);
}

ion-item-divider {
    --background: rgba(0, 0, 0, 0.0);
}

.simple {
    color: white;
}

.changecolor {
    color: white;
    font-family: Permanent Marker;
}

.defchangecolor {
    color: black;
    font-family: Permanent Marker;
}

.shadow {
    text-shadow: 1px 1px 7px black;
    //color: white;
    padding-top: -8px;
}

.vid {
    display: inline-block;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    //border-style: solid;
    //border-color: white;
    //padding-top: 5px;
    //padding-bottom: 5px;
    padding: 5px;
    color: white;
    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.3);
    z-index: 2;
    position: relative;
}

.mychat {
    --background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    --border-radius: 10px;
    padding: 10px;
    color: black;
    --box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.3);
}

.going {
    --background: rgba(0, 0, 0, 0.0);
    //--border-radius: 10px;
    //padding-top: 10px;
    color: white;
    //--box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.3);
}

.going2 {
    --background: rgba(0, 0, 0, 0.0);
    //--border-radius: 10px;
    //padding-bottom: 10px;
    color: white;
    //--box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.3);
}

ion-list {
    --ion-background-color: rgba(128, 128, 128, 0.0);
}

.extra-info {
    padding-left: 10px;
    color: lightgray;
    font-size: x-small;
    text-shadow: 1px 1px 7px black;
}

.defextra-info {
    padding-left: 10px;
    color: black;
    font-size: x-small;
}

//*********************************Minimal************************************

.minextra-info {
    padding-left: 10px;
    color: lightgray;
    font-size: x-small;
    //text-shadow: 1px 1px 7px black;
}

.mintop {
    --ion-background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    --border-radius: 15px;
    color: white;
    --box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.3);
}

.minvid {
    display: inline-block;
    //background: rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    border-style: solid;
    border-color: white;
    //padding-top: 5px;
    //padding-bottom: 5px;
    padding: 5px;
    color: white;
    //box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.3);
    z-index: 2;
    position: relative;
}

谁能告诉我为什么会这样，如何解决？有人还向我提到，我可以简单地使用IonicModule.forRoot（）使它看起来与在Android上的外观相同。使iOS版本看起来与其他平台相似的最简单的解决方案是什么？

Answer 1

Ionic应用程序的外观将取决于当前平台。您可以基于组件定义模式，使用md（适用于android）（材质设计）和ios，例如：

<ion-header mode="md">

或者您可以为整个应用程序全局定义它：https://ionicframework.com/docs/angular/config