javascript - jQuery widthRatio 在 IE8 上返回 NaN

Question

我有全屏网站。当我点击我的页面时，图像会直接全屏调整。它适用于 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 上搜索但没有找到解决方案。我该如何解决？谢谢你。

Answer 1

IE8不支持innerWidth ，

将此用于所有支持，

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

Answer 2

Yes, it's innerWidth support problem and solved by this link: https://stackoverflow.com/a/18136089/1485921

So, added this function on my js file:

(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));

Thank you!