HTML – VH,大众单位和Crazy IOS移动浏览器渲染

前端之家收集整理的这篇文章主要介绍了HTML – VH,大众单位和Crazy IOS移动浏览器渲染前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我认为使用相关单位开始我的新项目是个好主意.当我正在研究它时,我正在检查chrome仿真,以确保一切在这些设备上运行良好,并且它看起来很好.

然后我把它推到了heroku,它在我的Macbook上看起来很不错,但是当我真正将它加载到我的iPad上时,我想把它扔出窗外……

#bannerTop {
    position:relative;
    text-align: center;
    width:100vw;
    height:70vh;
    min-height: 70vh !important;
    max-height:70vh !important;
    background-image: asset-url('skycloudsalpha.jpg');
    background-repeat: no-repeat;
    background-position: 50% 75%;
    z-index:-1;
}

我正在使用VH单位.我怀疑这可能是问题所在?

可能还有其他一些潜在的问题,但我不确定如何调试我的问题,因为模拟器上的一切看起来都很好,但设备本身却没有.我现在花了大约三个小时,非常感谢一些帮助.

谢谢!

解决方法

你可以在 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,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

猜你在找的HTML相关文章