Question

我一直在研究基于离子角框架的PWA。由于它是一个网络应用程序，因此我一直在使用不同浏览器的不同设备上对其进行测试。

在开发过程中，我一直在考虑使用chrome浏览器。昨天，我使用safari作为浏览器在iphone上测试了Web应用程序，我发现页面（每页）的布局都不好。

例如：

标题是对齐的，但在android上不是chrome 平台。
动作控制器与chrome在android中不同 platfroms。还有更多这样的差异

尽管我认为爱奥尼克（Ionic）会对此进行照顾，但我无法从根本上造成这些问题。

任何人都可以建议我一些事情或导致root的任何指针导致问题。

P.S-我在页面上也使用过皮肤CSS

标题代码的几行示例如下：

component.html

<ion-header>
  <ion-navbar>
    <ion-toolbar>
      <ion-title>Title</ion-title>
    </ion-toolbar>
  </ion-navbar>
</ion-header>

component.scss

.toolbar-md{
    padding: 0 26px 0 0;
}

app.scss

.header-ios .toolbar-ios:last-child .toolbar-background-ios {
   border-bottom-width: 0;
}

.header-md::after,
.footer-md::before,
.tabs-md[tabsPlacement="top"] > .tabbar::after,
.tabs-md[tabsPlacement="bottom"] > .tabbar::before {
    display: none;
}

.toolbar-title-md {
    font-weight: 700;
}

如何在具有不同平台的浏览器中实现布局的一致性

0 个答案: