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单位.我怀疑这可能是问题所在？

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

谢谢！

解决方法

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

（编辑：ASP站长网）