很抱歉在这方面缺乏例子,但我认为这很容易理解。
我在我的网站上有一个固定的背景,目前是这样实现的:
#background {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #28305e;
background-image: url(../images/background.jpg);
background-size: cover;
-moz-background-size: cover;
background-position: center center;
z-index: -10;
}
<div id="background"></div>
到目前为止,这在所有浏览器中都是很棒的,除了移动的浏览器,它们在向下滚动时会隐藏地址栏。当地址栏被隐藏时,视口会垂直扩展,背景图像会刺耳地调整大小。在这个特定的网站上,用户上下滚动是很常见的,效果会让人分心。
有什么想法或策略来解决这个问题或以不同的方式实现背景吗?
我可以把整个东西 Package 在一个固定的容器中,并设置溢出y滚动,这可以防止地址栏被隐藏,但我不想这样做(谷歌眼镜不能滚动这些容器,哈哈......也想在那里演示)。
我一直在想一些能提供背景图像的东西:我用某种缓冲区来覆盖功能,这样它的渲染比视口大,并且除非视口扩展到缓冲区之外,否则不会重新渲染,但我不确定如何实现。
EDIT:我确实实现了这个功能,并在下面的回答中详细描述了这个过程。然而,即使使用了这个缓冲区设置(它将背景图像的高度扩展到比视口高度大60+像素),在地址栏隐藏时,它仍然显示一个空白的背景颜色段,一旦你停止滚动,它将呈现背景图像的其余部分。
仍然在寻找一种方法来保持本机地址栏隐藏功能(现在已经扩展到iOS 8中iPad上的iOS Safari),同时也有一个全屏背景图像,即使隐藏地址栏时视口改变高度,也总是完全渲染。开始怀疑我是否应该为所有浏览器提交错误报告...
6条答案
按热度按时间t0ybt7op1#
大约5年后,由于Safari和现在的Chrome for Android计算vh单位的方式发生了变化,这个问题终于得到了解决。
不幸的是,很难在任何代码平台上展示这一点,因为它们总是在iframe中嵌入结果。
我刚刚在一个背景元素上使用了以下代码:
这就是它的全部!只需要Android 56的Chrome,或iOS的Safari(不确定哪个版本,但这可能已经在Safari很长一段时间了)。
qoefvg9y2#
最后我为移动的开发了一个变通方案,它可能不会优雅地降级,但目前运行良好。
我在互联网上找到mobilecheck函数(http://detectmobilebrowsers.com/),如果返回true,我就把固定背景图像容器的高度增加70,然后当你向上拖动屏幕,网页浏览器的地址栏自动隐藏(从而增加窗口高度),它就有了足够的额外高度,这样background-size:cover不必刺耳地调整背景图像的大小来再次适合屏幕。
我本可以把整个页面放到一个固定的容器中,防止移动的地址栏隐藏起来,但我不喜欢回避移动浏览器的一个整洁的功能,我知道iOS对有自己滚动条的固定容器并不感到兴奋(当然有变通办法,但我更希望我的内容放在一个更标准的容器中)。
编辑:但是,此解决方法会引入此问题:CSS CHALLANGE: Background-Image with 100% height - White Space when Scrolling Mobile
zvms9eto3#
对于移动的safari,你必须像这样给html元素附加固定的背景。
然后将滚动设置为正文。
IE8仍然需要background div,因为它不支持background-size属性,所以移动的浏览器应该隐藏它,最简单的方法是利用IE8无法读取媒体查询
moiiocjp4#
对于那些仍在寻找答案的人,可以使用新的
vw
和vh
属性以及position: fixed
元素。当地址栏移动/缩小/等时,此选项会滚动,然后在页面上保持固定。
字符串
t5zmwmid5#
很难说没有一个例子,但你可能错过了
width:100%
,应该停止任何大小调整与滚动条。另一种在移动的上实现固定背景的方法是使用
position: absolute
和overflow: hidden
以及所有其他背景实现创建一个背景div,然后使用overflow-y:scroll;
创建一个内容div,并使用jquery或任何其他您选择用于获取窗口高度的方法设置内容div的高度。查看JS Fiddle中的示例。
holgip5t6#
我做了这个。我发现如果你从来没有真正滚动过正文/窗口,你就永远不会触发Chrome的自动隐藏。所以把内容 Package 在一个更大的div中,只要滚动它,自动隐藏就永远不会触发。但是同样!!!自动隐藏永远不会触发。(地址栏总是在那里)。毫不怀疑,你可以在这之后隐藏地址栏,但用户如何恢复地址栏呢?