1

スマートフォン/タブレットで正しく動作するように、ビューポートに合わせて拡大縮小する固定背景画像を取得するにはどうすればよいですか?

ここに記載されている方法のいずれも、私がテストしたものではうまく機能しません (Galaxy Nexus と TF300t、デフォルトのブラウザー、Firefox、または Chrome を使用すると、フラッシュ/奇妙なサイズ変更、または「カバー」命令の無視で問題が発生します)

私が目にしたことの 1 つは、タッチ デバイスの 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;
}
4

1 に答える 1

0

私は数ヶ月前にあなたのニーズに合ったアプローチを書きました：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);
于 2013-01-28T00:17:24.023 に答える