9

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

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

谢谢你！

4

1 回答 1

15

正如您可以在caniuse.com上阅读的那样

iOS7 中的部分支持是由于“vh”单元的错误行为。

已知的问题：

  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。

有关错误行为的更多信息

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

还有一个 polyfill https://github.com/rodneyrehm/viewport-units-buggyfill

于 2014-08-11T07:03:09.420 回答