固定的背景图像和覆盖在手机/平板电脑上

Question

如何获得缩放到视口以在智能手机/平板电脑上正常工作的固定背景图像？

任何methods mentioned here都不适用于我测试的（Galaxy Nexus和TF300t，使用默认浏览器，Firefox或Chrome都有闪烁/奇怪的大小调整，或忽略“封面”指令）

我要看到的一件事是不将背景图像放在触摸设备的HTML标签上，因为它们似乎滚动了一个全高视口而不是在HTML标签内滚动。

body {
  background: black url("../img/cover.jpg") no-repeat top center fixed;
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover;
}

Answer 1

我几个月前写过一个符合你需求的方法：http://plugins.jquery.com/fitpic/

HTML

<img src="http://ge.tt/api/1/files/1jN8IzR/0/blob?download" class='bg'>

CSS真的不需要

.bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1
}

JS

var fitPic = (function() {
    var winW = $(window).width(),
        winH = window.innerHeight || $(window).height(); // `innerHeight` for mobile safari

    $(".bg").each(function() {

        var elem = $(this),
            elemW = elem.width(),
            elemH = elem.height(),

            imgW = (elemW * winH) / elemH,
            imgH = (elemH * winW) / elemW,

            newW = imgH < winH ? imgW : winW,
            newH = imgH < winH ? winH : imgH;

        this.style.width = newW + "px";
        this.style.height = newH + "px";

    });
});

$(window).on('load resize', fitPic);