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 支持非的内部宽度，

将此用于所有支持，

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

Answer 2

是的，它是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));

谢谢！

jQuery widthRatio在IE8上返回NaN

2 个答案: