Question

例如，我想设置按钮或标题的高度，并将其设置为设备垂直视口的20％。我可以在CSS文件中更改它。但这并不考虑不同的屏幕尺寸。例如，将该按钮（或任何其他元素）的属性“height”设置为20％，但这意味着它是其父元素的20％，而不是给定设备的屏幕大小的高度。我可以将它设置为px中的特定值。但这意味着按钮的高度是固定的。

我可以使用视口：vh，vw。

.myButton {
  height: .2vh;
}

但旧设备（~Android 4.4）不支持此功能。我正在考虑使用vanilla JavaScript：

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    viewPortWidth = w.innerWidth || e.clientWidth || g.clientWidth,
    viewPortHeigth = w.innerHeight|| e.clientHeight|| g.clientHeight;

   button.height = viewPortHeigth * .2 + "px";// height of button will be dependent on device's viewport height

但我想知道是否有经验丰富的开发人员或离子团队推荐的另一种方法。如何将某些元素设置为相对于设备大小的特定值。

Answer 1

对我来说最有效的是媒体查询。

有关此主题的更多信息以及更多替代方案，请参阅此处： https://forum.ionicframework.com/t/support-for-various-mobile-devices-ios-android-phones-tablets-how-to-manage/17406

如何重新设计离子应用布局，使其在所有设备上看起来都很好？

1 个答案: