使用ios7修复了背景图片

Question

我有一个正在使用固定背景图像的项目。它对ios7以外的所有设备都适用。在ipad上，背景图像放大且模糊。这是我正在使用的CSS代码-

.header {

  display: table;

  height: 100%;

  width: 100%;

  position: relative;

  color: #fff;

  background: url(../images/boston2.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  }

这是实时页面的链接-www.wdeanmedical.com

我想念什么？

Answer 1

使用background-attachment: fixedwith background-size: cover会导致大多数移动浏览器出现问题（如您所见）。您可以尝试使用background-attachment: scroll。这不会达到您想要的效果，但是您至少会看到这些图像。您可以使用一两个媒体查询，将其限制为平板电脑或手机上的设备@media screen and (max-device-width: 1024px){}要么您可以使用background-position: scroll并包含一些JavaScript，它将图像保持在滚动位置（将其保持在窗口顶部）：DEMO

Answer 2

知道这是一个旧线程，但想提供一个基于@ Cruz-Nunez的解决方案的更新解决方案依赖视口大小可能会失败。例如，仅靠767像素的视口在iPad上不起作用，而增大尺寸则否定了这种方法的优势。相反，您可以检查设备是否具有悬停功能，如果没有，则可以像这样覆盖：@media (hover: none) {   .homeHero {       background-attachment: initial;   }}您还可以检查设备是否具有路线指示器（例如，手指）而不是精细的指示器（例如，鼠标）：@media (pointer: coarse) { ... }