背景:封面在移动浏览器上不能缩放

我正在进行的项目是一个分为多个部分的1页网站,第一部分是应用了背景图像的标头。 我的目标是让这个图像响应resize,所以我设置background-size属性来cover

在桌面浏览器上缩放视口时,图像会相应地缩放。 然而,在移动客户端(在iOS 7和Andriod Froyo / Kitkat上testing),图像似乎停留在全宽/高处,变得非常像素化和失真。

例如: http : //www.bardiadoust.ca

起初,我认为问题是-500%的边际和500%的填充我在每个部分的左/右(我用这个创build全宽部分,同时保持在我的网格内的内容)。 我拿出这个代码,仍然得到相同的结果。 如果任何人有什么线索,我做错了什么,这将是伟大的。

更新

我一直在做更多的调查,并认为这可能是一个iOS的问题,由于图像的大小限制( 阅读更多这里 ),换出了我的相当大的1.2MB图像与500k gif。 但问题依然存在。

更新2

还没有find一个完整的解决scheme,但我find了一个解决scheme,我很高兴。

在我的全局样式中,我在.masthead部分设置了这些背景属性:

 background: $tangerine; background: linear-gradient( rgba(232,85,4, .84), rgba(232,85,4, .84) ), url("../images/pano2.png") no-repeat center center; -webkit-background-attachment: fixed; -moz-background-attachment: fixed; -o-background-attachment: fixed; -ms-backgroudn-attachment: fixed; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; 

在我的第一个媒体查询中断点上,我将这些样式应用于.masthead:

 @media only screen and (max-width: 959px){ -webkit-background-attachment: scroll; -moz-background-attachment: scroll; -o-background-attachment: scroll; -ms-backgroudn-attachment: scroll; background-attachment: scroll; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; } 

contain似乎给我的移动,我正在寻找的结果,但只有当background-attachment属性没有设置为fixed 。 对于我来说,这并不是太大的折衷,因为固定背景在移动设备上并不能真正正常工作。

你有没有设置,让你的CSSselect器要求每个浏览器? 一些较新的CSS3属性和select器需要前缀才能使用跨浏览器:

 -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')"; 

如果这没有办法,我想你可以通过使用background-size contain;来修复它background-size contain; 在较小屏幕尺寸的视口中。

我终于find了解决这个问题的办法,我在这里发布,希望能帮助别人。

虽然我原本以为我的问题是background-size不能正确缩放,但似乎这个问题更多地涉及到background-attachment: fixed这两个属性导致背景缩小,也不能将图像固定到位而用户滚动(种类的输/输情况)。

这种方法有一些合法的缺点。 我首先在“四厨”博客上了解到这一点,值得一提的是Chris Ruppel解释这一技术。 ( 原文 )

为什么它不起作用

克里斯进一步详细了解为什么position: fixed在移动浏览器中的背景元素上不起作用与浏览器需要重绘的数量以及如何对性能产生负面影响有关。 因此, background-attachment属性在移动浏览器上无法正常工作。

这种技术背后的基本思想是像往常一样设置背景图像,而不是将附件属性设置为fixed ,而是添加position:fixed到div本身,有效地将其固定到body元素的顶部/左侧。

基本上,将这个与will-change属性结合起来,为移动设备创build一个新的绘图层来绘制背景( 基本上和translateZ(0)做同样的事情 ),而不会出现跳跃/跳跃(当你试图用JavaScript)的。 请阅读链接的文章,了解更多关于这种技术的信息。

HTML:

 <section class="masthead"> ... </section> 

CSS:

 .masthead { overflow: hidden; // added for pseudo-element position: relative; // added for pseudo-element // Fixed-position background image &::before { content: ' '; position: fixed; // instead of background-attachment width: 100%; height: 100%; top: 0; left: 0; background: url('/img/front/strategy.jpg') no-repeat center center; background-size: cover; will-change: transform; // creates a new paint layer z-index: -1; //ensures image is behind everything else } } 

我应该提到,虽然Chris已经在父元素上设置了overflowposition属性,但是从我的研究来看,他们没有任何效果。 相对定位不适用于固定元素,也不会溢出。

缺点

这项技术在我的testing中正常工作,但有几个原因可能导致您不想使用它:

  • 没有溢出控制 :因为这个div相对于视口是固定的,所以overflow:hidden没有效果。 这意味着你不能“剪辑”图像,以适应其容器div,它将始终填充整个背景。 这通常不会成为实际问题,因为<section class="masthead">下的任何其他内容都将位于图像顶部(实际上将其隐藏在其余内容下)。 但是,如果由于某种原因,你需要剪切/裁剪你的背景图像,以不占用整个背景,你可以尝试使用clip属性。 看到这个问题的第二个答案

  • 滚动显示(Safari) :这纯粹是一种审美的事情,但由于Safari中的“弹性”滚动,如果滚动浏览页面的顶部或底部,背景将会透视。 这不会发生在Chrome浏览器,只是Safari。

  • 每页一个图像 :其他人可能已经知道了这一点,但因为这个背景图像附加的div是相对于视口固定(在x:0,y:0),我无法find一种方法来添加多个固定的图像作为1页的一部分。 问题是,它将简单地堆叠在(或取决于它的z-索引后面)之前的图像。 将其top值设置为硬编码像素/ rem / em值会使其下移,但无法确切知道需要向下移动多大才能与其内容alignment(特别是在响应式网站上,其中的内容身高永远不会固定)。

  • 一种哈克 :虽然这是完全有效的,我甚至使用它在当前正在进行的项目上。 它确实感到哈克。 background-attachment: fixed感觉像它应该是最好的解决scheme,如果它的工作。