0

私はフルスクリーンのサイトを持っています。自分のページをクリックすると、画像がフルスクリーンで直接サイズ変更されます。IE 9-10、Chrome、Firefox で動作しています。ただし、IE8 では動作しません。

私のJSコード:

$(window).resize(function () { 
    $("#backgrounds img").each(function (k, v) {
        $backgroundImg = $(this);

        windowWidth = window.innerWidth
        windowHeight = window.innerHeight
        imageWidth = 1366
        imageHeight = 900

        widthRatio = windowWidth / imageWidth;
        heightRatio = windowHeight / imageHeight;

        console.log('width: ' + widthRatio)
        console.log('height: ' + heightRatio)

        if (widthRatio > heightRatio) {
            $backgroundImg.width(windowWidth);
            $backgroundImg.height(imageHeight * widthRatio);
        } else {
            $backgroundImg.height(windowHeight);
            $backgroundImg.width(imageWidth * heightRatio);
        }
        $backgroundImg.css({ marginLeft: -$backgroundImg.width() / 2 });
        $backgroundImg.css({ left: "50%" });
    });

});

Chrome のコンソールなどを確認すると、次のデータが取得されます。

width: 1.3711566617862372 
height: 0.7488888888888889

しかし、IE8 でこの関数を確認すると、次のようになります。

height: NaN 
 width: NaN

StackoverFlow で検索しましたが、解決策が見つかりません。どうすれば修正できますか？ありがとうございました。

4

2 に答える 2

0

はい、それは innerWidth サポートの問題であり、このリンクで解決されます: https://stackoverflow.com/a/18136089/1485921

だから、私のjsファイルにこの関数を追加しました：

(function (window, html, body) {
    if (!window.innerWidth) Object.defineProperty(window, 'innerWidth', {
        get: function () { return html.clientWidth }
    });

    if (!window.innerHeight) Object.defineProperty(window, 'innerHeight', {
        get: function () { return html.clientHeight }
    });


}(this, document.documentElement, document.body));

ありがとうございました！

于 2013-11-14T10:16:52.037 に答える