css - Ionic - 图像比例在某些设备上不受尊重

Question

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

在某些设备上(iPhone 5S、iPhone 5C、Samsung S5)，页面显示如下:

这个页面是用 ionic 网格制作的。这是我的 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;
        }
    }
}