当我对Ionic使用“ vw”指标时，CSS无法在iOS 7.x上正确呈现（PhoneGap）

Question

我正在使用基于PhoneGap的Ionic Framework制作应用程序。

我正在对多个属性使用“ vw”指标，以使其可针对所有设备（iOS或Android）调整大小。当我在浏览器上使用“ ionic serve”选项和8.1版的iOS Simulator运行时，得到了预期的结果，但是当我在iOS 7.1 Simulator中运行时，与边框相关的所有属性（只有-）呈现。

关于如何解决这个问题的任何想法？

谢谢！

Answer 1

视口单位在iOS 7上无法正常运行caniuse.com

iOS7中的部分支持是由于“ vh”单元的错误行为。

已知的问题：

1. 在版本34之前，Chrome不支持视口单位的边框宽度，列间距，变换值，框阴影或calc（）。
2. iOS Safari（6和7）都不支持视口单位的边框宽度，列间距，变换值，框阴影或calc（）。
3. 如果页面已离开并在60秒后返回，则iOS 7 Safari会将视口单位值设置为0。
4. 打印模式下的Internet Explorer 9将vh解释为页面。30vh = 30页
5. 当方向改变时，iOS 7 Safari会重新计算在vh中设置为vw的宽度，在vw中设置为vh的高度。

有关越野车行为的更多信息

http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html

还有一个polyfill https://github.com/rodneyrehm/viewport-units-buggyfill