我将PWA(https://nrgmap360.firebaseapp.com/)从离子3迁移到离子4 beta2。我在几个晚上https://beta.ionicframework.com/docs/building/migration/的迁移指南的帮助下完成了迁移。
它有一个缺点,效果很好。在除Chrome之外的浏览器中,我得到有关网格系统的意外结果。上图显示了在Chrome,Edge和Firefox中的结果。使用ionic serve --lab,Windows平台的屏幕似乎根本不使用CSS。
我错过了什么吗,还是打算在以后的Beta版中专注于其他浏览器?
谢谢。
NrGMap PWA in Chrome, Edge and Firefox
[home.page.html]
<ion-content>
<div id="homepage">
<ion-label no-margin no-padding text-center style="font-size:4em;color:#eaecef">{{ levelData.localeDateString }}</ion-label>
<ion-grid no-padding style="margin-top:-4em;">
<ion-row>
<ion-col size="2" text-center no-padding no-margin>
<ion-button fill="clear" icon-only size="large" expand="block" (click)="moveToLevelData('', direction.previous)">
<ion-icon name="arrow-dropleft"></ion-icon>
</ion-button>
</ion-col>
<ion-col size="8" text-center no-padding no-margin>
<ion-button fill="clear" size="large" expand="block" (click)="moveToLevelData()">{{ levelData.fromHourStr }} - {{ levelData.toHourStr }}</ion-button>
</ion-col>
<ion-col size="2" text-center no-padding no-margin>
<ion-button fill="clear" icon-only size="large" expand="block" (click)="moveToLevelData('', direction.next)">
<ion-icon name="arrow-dropright"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-button size="large" expand="full" [color]="isSelected(sleepButton) ? 'secondary' : 'primary'"
(click)="toggleLevel(sleepButton)">
{{ sleepButton.label }}
<ion-icon *ngIf="sleepButton.iconName != ''" slot="sleepButton.iconType" [name]="sleepButton.iconName"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6" *ngFor="let levelButton of levelButtons">
<ion-button size="large" expand="full" [color]="isSelected(levelButton) ? 'secondary' : 'primary'"
(click)="toggleLevel(levelButton)">
{{ levelButton.label }}
<ion-icon *ngIf="levelButton.iconName != ''" slot="levelButton.iconType" [name]="levelButton.iconName"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
[variables.css]
#homepage {
margin-left:auto;
margin-right:auto;
max-width:540px;
};