Question

我正在使用离子应用。我的应用程序中有一个离子模式。当我在px或百分比设置高度时它对于所有Android设备正确但不适用于ios。如果我使用.platform-ios作为高度ios设备的CSS对于所有ios设备来说都不一样。我已经为ios添加了vh，但对于所有ios设备仍然不一样。我能做什么才能有人建议我。

CSS： -

 .appModal
{
   height:120px;
}

.platform-ios .appModal
{
   height:40vh;
}

谢谢。

Answer 1

您可能需要查看此link。

您可以看到iOS 9.3 Safari及更高版本支持视口高度和宽度测量vh和vw

较旧的iOS设备不支持这些设备，请参阅该链接上的已知问题标签以获取更多信息。

作为后备，您可以使用以下内容：

.class-name {
  height: 300px;
  height: 40vh;
}

支持vh的浏览器将使用指定的40vh，但较旧的浏览器/设备会看到错误并默认返回300px高度。

请注意：更广泛支持的css应首先出现在您的标记中。否则，您将无法覆盖较新的浏览器。

Answer 2

我也有这个问题; 我找到的最好的解决方案是使用javascript支持每个地方;）代码是这样的：

  var heighDevice = window.screen.height;
  var FirstELement = document.getElementById('MyAppModal');//MyAppModal id element 
  var heightElm = (heighDevice  * 40) / 100; // 40 is height in vh  
  // add the height to the element
  FirstELement.style["height"] =  heightElm + "px";

带混合应用程序的ios设备中的高度问题

2 个答案: