当我将 'vw' 指标与 Ionic (PhoneGap) 一起使用时,CSS 在 iOS 7.x 上无法正确呈现

CSS not rendering correctly on iOS 7.x when I use 'vw' metric with Ionic (PhoneGap)

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

我对几个属性使用 'vw' 指标,使它们可以针对所有设备调整大小,iOS 或 Android。当我 运行 在我的浏览器上使用 'ionic serve' 选项和 iOS 8.1 版本的模拟器时,我得到了预期的结果,但是当我 运行 在 iOS 7.1 模拟器,所有 - 并且只有 - 边框相关属性不会被渲染。

知道如何解决这个问题吗?

谢谢!

视口单位在 iOS 7 caniuse.com

上效果不佳

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

已知问题:

  1. Chrome does not support viewport units for border widths, column gaps, transform values, box shadows or in calc() until version 34.
  2. iOS Safari (both 6 and 7) does not support viewport units for border widths, column gaps, transform values, box shadows or in calc().
  3. iOS 7 Safari sets viewport unit values to 0 if the page has been left and is returned to after 60 seconds.
  4. Internet Explorer 9 in print-mode interprets vh as pages. 30vh = 30 pages
  5. iOS 7 Safari recalculates widths set in vh as vw, and heights set in vw as vh, when orientation changes.

有关错误行为的更多信息

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

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