CODEWITHSUNDEEP
cssiosionic-frameworkionic4ionic-native
Jibri Wright
Jibri Wright

Reputation: 15

Ionic 4 App Looks Different on iOS Than It Does On Android and Web

so we're making an app using the Ionic Framework, and the application looks different on iOS than it does on Android and web. How it looks on iOS

How It Looks On Other Platforms

This is happening on most pages of the app with most of the headers. Here is the html and css of the page I showed in this example.

<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>

Here is The 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;
}

Can anyone tell me why this is happening and how I can fix it? Someone also mentioned to me that I can simply use IonicModule.forRoot() somehow to make it look the same way it does on Android. What would be the simplest solution for making the iOS version look similar to other platforms?

Upvotes: 0

Views: 2462

Answers (1)

Jejouz
Jejouz

Reputation: 179

Ionic apps will look differently depending on the current platform. You can define the mode on a component basis, with md for android (material design), and ios, for example:

<ion-header mode="md">

Or you can define it globally for the whole app: https://ionicframework.com/docs/angular/config

Upvotes: 2

Related Questions