Question

我使用Ionic框架制作了一个应用程序，但在某些设备上遇到了问题。这是我的主页：

在某些设备（iPhone 5S，iPhone 5C，三星S5）上，页面显示如下：

此页面由离子栅制成。这是我的CSS的一部分：

    ion-grid{
        height: 100%;

        ion-row.homeM{
            height: 20%;

            img{
                height: 80%;
            }
            p{
                margin-top: 0px;
            }
        }

        ion-row.homeML{
            height: 25%;

            img{
                height: 75%;
            }
            p{
                margin-top: 0px;
            }
        }
    }

ion-row.homeM用于纵向显示，ion-row.homeML用于横向显示。

欢迎帮助：）！

谢谢

Answer 1

您是否尝试以px，dpi，em或其他单位指定最大高度？
由于css中的百分比，这可能与分辨率/空间问题有关。

尝试类似的方法：

ion-grid{
    height: 100%;

    ion-row.homeM{
        height: 80px;

        img{
            height: 60px;
        }
        p{
            margin-top: 0px;
        }
    }

    ion-row.homeML{
        height: 60px;

        img{
            height: 40px;
        }
        p{
            margin-top: 0px;
        }
    }
}

Answer 2

要创建自适应设计，请尝试使用“ vh代表高度” 和“ vw代表宽度” 或“ em” 而不是“ px或％” 尝试一下：

Xamarin.Android
Version: 9.0.0.20 (Visual Studio Community)
Android SDK: /Applications/Utilities/android-sdk
    Supported Android versions:
        4.0.3 (API level 15)
        4.1   (API level 16)
        4.4   (API level 19)
        5.0   (API level 21)
        5.1   (API level 22)
        6.0   (API level 23)
        7.0   (API level 24)
        7.1   (API level 25)
        8.1   (API level 27)

SDK Tools Version: 26.1.1
SDK Platform Tools Version: 28.0.1
SDK Build Tools Version: 28.0.3

Java SDK: /usr
java version "1.8.0_92"
Java(TM) SE Runtime Environment (build 1.8.0_92-b14)
Java HotSpot(TM) 64-Bit Server VM (build 25.92-b14, mixed mode)

我希望这项帮助对您有所帮助，您可以了解我在这里所说的话： ViewPort Unit

离子-某些设备不支持图像缩放

2 个答案: