我目前正在使用Twitter Bootstrap开发响应式网站.
该网站在移动设备/平板电脑/台式机上提供全屏背景图像.这些图像使用两个div旋转并淡入每个图像.
除了一个问题,它几乎是完美的.在Android上使用iOS Safari,Android浏览器或Chrome时,当用户向下滚动页面并导致地址栏隐藏时,背景会略微跳跃.
该网站在这里:http://lt2.daveclarke.me/
在移动设备上访问它并向下滚动,您应该看到图像调整大小/移动.
我用于后台DIV的代码如下:
#bg1 { background-color: #3d3d3f; background-repeat:no-repeat; background-attachment:fixed; background-position:center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:fixed; width:100%; height:100%; left:0px; top:0px; z-index:-1; display:none; }
欢迎所有建议 - 这已经有一段时间了!
这个问题是由URL栏缩小/滑动并改变#bg1和#bg2 div的大小引起的,因为它们是100%高度和"固定".由于背景图像设置为"覆盖",因此当包含区域较大时,它将调整图像大小/位置.
根据网站的响应性,背景必须扩展.我接受两种可能的解决方案:
1)将#bg1,#bg2高度设置为100vh.理论上,这是一个优雅的解决方案.但是,iOS有一个vh bug(http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/).我尝试使用max-height来防止这个问题,但它仍然存在.
2)视口大小(由Javascript确定)不受URL栏的影响.因此,Javascript可用于根据视口大小在#bg1和#bg2上设置静态高度.这不是最好的解决方案,因为它不是纯CSS,并且页面加载时会有轻微的图像跳转.但是,考虑到iOS的"vh"错误(在iOS 7中似乎没有修复),这是我唯一可行的解决方案.
var bg = $("#bg1, #bg2"); function resizeBackground() { bg.height($(window).height()); } $(window).resize(resizeBackground); resizeBackground();
另外,我在iOS和Android中看到了这些调整大小的URL栏的问题.我理解其目的,但他们确实需要思考他们带给网站的奇怪功能和破坏.最新的更改是,您无法再使用滚动技巧"隐藏"iOS或Chrome上的页面加载网址栏.
编辑:虽然上面的脚本完美地用于防止背景调整大小,但当用户向下滚动时会导致明显的差距.这是因为它将背景大小保持为屏幕高度的100%减去URL栏.如果我们向高度添加60px,正如瑞士所说,这个问题就消失了.这确实意味着当URL栏存在时我们无法看到背景图像的底部60px,但它可以防止用户看到间隙.
function resizeBackground() { bg.height( $(window).height() + 60); }
我的网站标题上有类似的问题.
html, body { height:100%; } .header { height:100%; }
这将最终导致Android chrome上的滚动滚动体验,因为.header-container将在url-bar隐藏并且手指从屏幕移除后重新缩放.
CSS-解决方案:
添加以下两行将阻止url-bar隐藏和垂直滚动仍然可能:
html { overflow: hidden; } body { overflow-y: scroll; -webkit-overflow-scrolling:touch; }
当我试图创建一个覆盖整个视口的入口屏幕时,我也遇到了这个问题.不幸的是,接受的答案不再适用.
1)高度设置为100vh
每次视口大小更改时调整大小的元素,包括由(dis)出现的URL栏引起的情况.
2)$(window).height()
返回值也受URL栏大小的影响.
一种解决方案是使用AlexKemptontransition: height 999999s
在答案中建议的"冻结"元素.缺点是这有效地禁用了对所有视口大小变化的适应,包括由屏幕旋转引起的变化.
所以我的解决方案是使用JavaScript手动管理视口更改.这使我可以忽略可能由URL栏引起的小变化,并仅对大的变化做出反应.
function greedyJumbotron() { var HEIGHT_CHANGE_TOLERANCE = 100; // Approximately URL bar height in Chrome on tablet var jumbotron = $(this); var viewportHeight = $(window).height(); $(window).resize(function () { if (Math.abs(viewportHeight - $(window).height()) > HEIGHT_CHANGE_TOLERANCE) { viewportHeight = $(window).height(); update(); } }); function update() { jumbotron.css('height', viewportHeight + 'px'); } update(); } $('.greedy-jumbotron').each(greedyJumbotron);
编辑:我实际上使用这种技术height: 100vh
.页面从一开始就正确呈现,然后javascript启动并开始手动管理高度.这样,在页面加载时(甚至之后),根本没有闪烁.
我发现杰森的回答并不适合我,我还在跳跃.Javascript确保页面顶部没有间隙,但只要地址栏消失/重新出现,背景仍然会跳跃.因此,除了Javascript修复,我还应用于transition: height 999999s
div.这会创建一个持续时间过长的过渡,以至于它实际上冻结了元素.
这里的所有答案都是使用window
高度,这受URL栏的影响.大家都忘了screen
身高吗?
这是我的jQuery解决方案:
$(function(){ var $w = $(window), $background = $('#background'); // Fix background image jump on mobile if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) { $background.css({'top': 'auto', 'bottom': 0}); $w.resize(sizeBackground); sizeBackground(); } function sizeBackground() { $background.height(screen.height); } });
添加.css()
零件是将不可避免的顶部对齐绝对定位元素更改为底部对齐,因此根本没有跳跃.虽然,我想没有理由不直接将它添加到普通的CSS中.
我们需要用户代理嗅探器,因为桌面上的屏幕高度没有帮助.
此外,这是假设#background
是填充窗口的固定位置元素.
对于JavaScript纯粹主义者(警告 - 未经测试):
var background = document.getElementById('background'); // Fix background image jump on mobile if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) { background.style.top = 'auto'; background.style.bottom = 0; window.onresize = sizeBackground; sizeBackground(); } function sizeBackground() { background.style.height = screen.height; }
编辑:很抱歉,这不能直接回答您有多个背景的具体问题.但这是搜索固定背景在移动设备上跳跃的问题时的第一个结果之一.
目前我使用的解决方案是检查userAgent
上$(document).ready
,看它是否是有问题的浏览器之一.如果是,请按照下列步骤操作:
将相关高度设置为当前视口高度而不是"100%"
存储当前视口水平值
然后,$(window).resize
如果新的水平视口尺寸与其初始值不同,则仅更新相关的高度值
存储新的水平和垂直值
或者,您也可以仅在超出地址栏高度时测试允许垂直调整大小.
哦,地址栏确实会影响$(window).height
.请参阅:Mobile Webkit浏览器(chrome)地址栏更改$(window).height(); 制作背景尺寸:每次封面重新缩放
JS"窗口"宽度 - 高度与"屏幕"宽度 - 高度?
问题可以通过媒体查询和一些数学来解决.这是一个肖像方向的解决方案:
@media (max-device-aspect-ratio: 3/4) { height: calc(100vw * 1.333 - 9%); } @media (max-device-aspect-ratio: 2/3) { height: calc(100vw * 1.5 - 9%); } @media (max-device-aspect-ratio: 10/16) { height: calc(100vw * 1.6 - 9%); } @media (max-device-aspect-ratio: 9/16) { height: calc(100vw * 1.778 - 9%); }
由于当网址栏消失时,vh会发生变化,因此您需要以另一种方式确定高度.值得庆幸的是,视口的宽度是恒定的,移动设备只有几个不同的宽高比; 如果你可以确定宽度和宽高比,一点数学将给你视口高度完全与vh 应该工作.这是过程
1)为要定位的宽高比创建一系列媒体查询.
使用device-aspect-ratio而不是aspect-ratio,因为后者会在url bar消失时调整大小
我将"max"添加到设备宽高比,以定位最流行之间恰好跟随的任何宽高比.它不会那么精确,但它们只适用于少数用户,并且仍然非常接近正确的vh.
记住使用水平/垂直的媒体查询,所以对于肖像你需要翻转数字
2)对于每个媒体查询,乘以您想要的元素在vw中的任何百分比,与宽高比相反.
由于您知道宽度和宽度与高度的比率,因此您只需将所需的百分比(在您的情况下为100%)乘以高度/宽度的比率.
3)你必须确定url bar高度,然后从高度减去它.我还没有找到确切的测量结果,但我在景观中使用了9%的移动设备并且看起来效果相当不错.
这不是一个非常优雅的解决方案,但其他选项也不是很好,考虑到它们是:
让您的网站看起来对用户有害,
具有不正确尺寸的元素,或
使用javascript进行一些基本样式,
缺点是一些设备可能具有与最流行的不同的url条高度或纵横比.但是,使用这种方法,如果只有少数设备遭受几个像素的加/减,这对我来说似乎比刷网时调整网站的每个人都好.
为了方便起见,我还创建了一个SASS mixin:
@mixin vh-fix { @media (max-device-aspect-ratio: 3/4) { height: calc(100vw * 1.333 - 9%); } @media (max-device-aspect-ratio: 2/3) { height: calc(100vw * 1.5 - 9%); } @media (max-device-aspect-ratio: 10/16) { height: calc(100vw * 1.6 - 9%); } @media (max-device-aspect-ratio: 9/16) { height: calc(100vw * 1.778 - 9%); } }