Question

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

我使用jquery调整容器div的高度＆＃39; var wheight = $（window）.height（）;＆＃39;

我觉得这可以获得整个文档的长度，并且可以感觉到图像被拉伸。

我有一个关于小提琴的设置示例，这可能会出现在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;
}

Answer 2

可以使用vh单位使用css计算窗口高度。小提琴：http://fiddle.jshell.net/dtphzdxy/5/

.bg-intro {
    width:100%;
    height:100vh;
}

背景图像在移动野生动物园中伸展

2 个答案: