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

Question

我认为使用相关单位开始我的新项目是个好主意.当我正在研究它时,我正在检查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单位.我怀疑这可能是问题所在？

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

谢谢!

Answer 1

你可以在caniuse.com上阅读

iOS7中的部分支持是由于"vh"单元的错误行为造成的.

已知的问题:

1. Chrome不支持视口单元的边框宽度,列间隙,变换值,框阴影或在calc()版本34之前.
2. iOS Safari(6和7)不支持边框宽度,列间隙,变换值,框阴影或calc()中的视口单元.
3. 如果页面已经离开,iOS 7 Safari将视口单元值设置为0,并在60秒后返回.
4. 打印模式下的Internet Explorer 9将vh解释为页面.30vh = 30页
5. iOS 7 Safari将vh中设置的宽度重新计算为vw,当方向更改时,以vw设置的高度将重新设置为vh.

有关越野车行为的更多信息

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

和polyfill https://github.com/rodneyrehm/viewport-units-buggyfill