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

查看:83
本文介绍了当我对Ionic使用"vw"指标时,CSS无法在iOS 7.x上正确呈现(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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆