Question

在我的离子应用程序中，首次打开该应用程序时，一切看起来都很完美。但是，如果我刷新页面css不会加载，并且页面看起来很糟。这仅在iPhone的Chrome外观上显而易见。问题一直存在，直到我使用ionic-serve命令重新启动应用程序为止。但是，如果我打开一个新的隐身标签，一切似乎都正确。

出什么问题了？

这是第一次看：

这是第二看：

这是我的scss代码：

page-home {
.ion-header {font-family:Georgia, 'Times New Roman', Times, serif; color:#BBBF95; font-size: 18px !important;font-weight: bold !important;}
.ion-content-preview {color:white !important;font-style: italic;}
.item-content {
    background-color: var(--main-bg-color);
  }
  .item-md {
    background: transparent !important;
} 
ion-toolbar {
    min-height: 20px !important;
    height: 20px !important;
}
.page-count{
    float:right !important;
    margin-right: 14px !important;
    color:white !important;
    min-height: 10px !important;
    height: 10px !important;
    margin-top: 3px !important;
}
.item-checkbox {
    padding-left: 8px;
    padding-top: 3px;
  }
  .item-checkbox .checkbox {
    right: auto;
    color:white !important;
    font-family: "Roboto", "Helvetica Neue", sans-serif !important;
  }
ion-select{
    float:right !important;
    margin-top: -30px !important;
}

}

谢谢您的帮助。

Answer 1

最初加载“应用”时，在浏览器启动时，您的开发人员工具未处于活动状态。 Ionic会根据您的设备选择一个“主题”。如果检查页面，则会在启动时看到带有“ platform-core”类的“ md”类（以及更多内容）。在启用了设备模式的情况下使用开发人员工具并刷新时，该应用会重新加载，并根据“所选设备”重新设置类别。对于您的iPhone 6/7/8。您现在将拥有'ios'和'platform-ios'以及更多设置。这就是给您的“ css错误”。

这不是错误。您只需要实现一些特定于平台的CSS调整即可。那将解决您的问题。

尝试使用：

ionic serve --lab

您将能够查看多个平台及其样式。这样，您就可以轻松检查它们并更轻松地创建特定于平台的CSS调整。

设备模式： https://developers.google.com/web/tools/chrome-devtools/device-mode/

刷新页面时未加载Ionic CSS

1 个答案: