【发布时间】：2023-04-04 21:36:01
【问题描述】：
所以我们正在使用 Ionic 框架制作应用程序，该应用程序在 iOS 上的外观与在 Android 和 Web 上的外观不同。 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 版本看起来与其他平台相似的最简单的解决方案是什么？
【问题讨论】：
-
您可以尝试从 ion-content 中删除 *ngIf 并在 div 上使用它，而不是用它来包装当前在 ion-content 中的所有内容吗？基本上使离子含量无条件存在
-
我试过了，它没有任何区别。有多个离子内容，原因是应用程序的布局可以根据最终用户喜欢它的外观而改变。@谢尔盖鲁登科
标签： css ios ionic-framework ionic4 ionic-native