时间戳

首页 > 解决方案 > Ionic 3 网格大小不适应较小的屏幕

ionic-framework - Ionic 3 网格大小不适应较小的屏幕

问题描述

我有一个我开发的 Ionic 3 移动应用程序，其中有我在网格中设置的表单字段。

有 3 列应该并排显示。

在大多数型号中，它看起来不错，但是当我在 iPhone 5s 甚至 6s 上查看它时，这些字段并没有并排显示。

相反，输入字段会删除一行并填充 100% 的宽度，而其他列位于顶部。

这是我的代码：

<ion-grid fixed *ngIf="showPhone">
  <ion-row class="edit-field">
    <ion-col col-auto class="field-icon">
      <ion-icon name="md-remove-circle"></ion-icon>
    </ion-col>
    <ion-col col-auto class="field-type">
      <select name="phoneType" [(ngModel)]="phoneData.phone_type">
        <option value="select"> -- Select -- </option>
        <option value="home">home</option>
        <option value="mobile">mobile</option>
        <option value="business">business</option>
        <option value="home fax">home fax</option>
        <option value="work fax">work fax</option>
        <option value="fax">fax</option>
      </select>
    </ion-col>
    <ion-col class="field-input">
      <input type="text" 
      [(ngModel)]="phoneData.phone_number" 
      (blur)="addPhone(phoneData)"
      placeholder="Phone">
    </ion-col>
  </ion-row>
</ion-grid>

我怎样才能使它在较小的屏幕上观看时适应？

标签： ionic-frameworkionic3

解决方案

您可以使用媒体查询来修复它。根据屏幕大小，您需要更改宽度。

前任：

 @media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
 }

 /* On screens that are 600px or less, set the background color to olive */
 @media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
 //whatever in CSS.
 }

如果你只需要影响 IOS 的 CSS 代码，你应该在 css 中检查平台。

任何疑问请参考链接https://ionicframework.com/docs/theming/platform-specific-styles/

推荐阅读