Question

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

应该并排显示3列。

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

相反，输入字段放一行并填充宽度的100％，其他列在顶部。

这是我的代码：

{
    "token":"23gh3hg234hg3h",
    "country":"AU",
    "program":"1000",
    "device":"shjkhdja283422",
    "action":"register",
    "email":"john@smith.com",
    "password":"213......hfjsdf",
    "firstname":"John",
    "lastname":"Smith",
    "mobile":"2133992214"
}

我如何制作它以便在较小的屏幕上观看时可以适应？

Answer 1

您可以使用媒体查询对其进行修复。根据屏幕尺寸，您需要更改宽度。

例如：

 @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/

Ionic 3网格尺寸将无法适应较小的屏幕

1 个答案: