javascript - 移动 safari 中的背景图像被拉伸(stretch)

Question

我在登陆页面使用背景图片，它在桌面浏览器、Android 浏览器上工作正常，但在 iOS 浏览器上失败......在寻找答案后，我发现问题是由于包含背景图片的 div 的高度。

我使用 jquery 'var wheight = $(window).height();' 调整了容器 div 的高度

我认为这会增加整个文档的长度，并给人一种图像被拉伸(stretch)的感觉。

我在 fiddle 上有设置示例，这可能会在 iOS 上正确出现，因为我在使用 jQuery 添加高度后没有测试过。

处理这个高度问题的最佳方法是什么。

我应该使用 screen.height(); 还是有办法解决这个问题

http://fiddle.jshell.net/dtphzdxy/3/

Answer 1

在 css 部分试试这个

html, body {
    margin:0;
    padding:0;
}
.bg-intro {
    width:100%;
    height:100vh;
    position:absolute;
}
.bg-intro {
    width:100%;
}
.parallax {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.parallax-1 {
    background-image: url("http://www.hdwallpapersos.com/wp-content/uploads/2014/07/HD-Wallpaper-Nature.jpg");
    transition: height 0.85s cubic-bezier(0.725, 0, 0, 0.995) 0s;
}