问题
I'm making an app using Ionic Framework, which is based upon PhoneGap.
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?
Thanks!
回答1:
Viewport units doesn't work well on iOS 7 caniuse.com
Partial support in iOS7 is due to buggy behavior of the "vh" unit.
known issues:
- Chrome does not support viewport units for border widths, column gaps, transform values, box shadows or in calc() until version 34.
- iOS Safari (both 6 and 7) does not support viewport units for border widths, column gaps, transform values, box shadows or in calc().
- iOS 7 Safari sets viewport unit values to 0 if the page has been left and is returned to after 60 seconds.
- Internet Explorer 9 in print-mode interprets vh as pages. 30vh = 30 pages
- iOS 7 Safari recalculates widths set in vh as vw, and heights set in vw as vh, when orientation changes.
More info about the buggy behavior
http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html
And a polyfill https://github.com/rodneyrehm/viewport-units-buggyfill
来源：https://stackoverflow.com/questions/27976847/css-not-rendering-correctly-on-ios-7-x-when-i-use-vw-metric-with-ionic-phoneg