具有混合应用程序的 ios 设备中的高度问题答案

【问题标题】：Height issue in ios devices with Hybrid app具有混合应用程序的 ios 设备中的高度问题
【发布时间】：2016-12-20 14:28:34
【问题描述】：

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

css:-

 .appModal
{
   height:120px;
}

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

谢谢。

【问题讨论】：

我可能不明白你到底想问什么，但% 和vh 的重点是分别与设备的宽度和高度相关。所以对于不同的设备它必须是不同的

标签： ios css ionic-framework

【解决方案1】：

您可能想看看这个link。

您可以看到 iOS 9.3 Safari 及更高版本支持 Viewport Height 和 Width 测量 vh 和 vw

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

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

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

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

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

【讨论】：

【解决方案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";

【讨论】：