Ionic 4 beta 2是否支持Edge和Firefox?

时间:2018-08-15 19:17:36

标签: ionic4

我将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; 
    };

0 个答案:

没有答案