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”单元的错误行为造成的。

已知问题：

Chrome不支持边框宽度列的视口单元   间隙，变换值，框阴影或在calc（）中直到版本34。

iOS Safari（6和7）不支持边框宽度，列间距，变换值，框阴影或calc（）的视口单元。

如果页面已经离开，iOS 7 Safari将视口单元值设置为0，并在60秒后返回。

打印模式下的Internet Explorer 9将vh解释为页面。 30vh = 30页

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

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

1 个答案: