当我对Ionic使用"vw"指标时，CSS无法在iOS 7.x上正确呈现(PhoneGap) [英] CSS not rendering correctly on iOS 7.x when I use 'vw' metric with Ionic (PhoneGap)

问题描述

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

I'm making an app using Ionic Framework, which is based upon PhoneGap.

我正在对多个属性使用"vw"度量标准，以使其可调整为适用于所有设备(iOS或Android)的大小.当我在浏览器上使用"ionic serve"选项和用于8.1版本的iOS Simulator运行时，得到了预期的结果，但是当我在iOS 7.1 Simulator中运行时，所有与-并且仅-边框相关的属性均未获得呈现.

I'm using 'vw' metric for several properties to make them resizable for all the devices, either iOS or Android. When I run on my browser with the 'ionic serve' option and the iOS Simulator for the 8.1 version I get the expected result, but when I run on iOS 7.1 Simulator, all the - and ONLY the - border related properties don't get rendered.

关于如何解决此问题的任何想法?

Any idea on how to solve this?

谢谢！

推荐答案

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

Viewport units doesn't work well on iOS 7 caniuse.com

iOS7中的部分支持是由于"vh"单元的错误行为.

Partial support in iOS7 is due to buggy behavior of the "vh" unit.

已知问题:

1. Chrome不支持视口单位的边框宽度，列差距，变换值，框阴影或在calc()中，直到版本34.
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的高度.

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

More info about the buggy behavior

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

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

And a polyfill https://github.com/rodneyrehm/viewport-units-buggyfill

这篇关于当我对Ionic使用"vw"指标时，CSS无法在iOS 7.x上正确呈现(PhoneGap)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！