jQuery resize() 在 IE8 中不起作用

Question

我很困惑...我正在构建一个响应式网站，该网站仅在较大的屏幕上加载大图形。它在 IE9/FF/Chrome 中运行良好，但在 IE8 中不起作用。

有人知道是什么导致 IE8 不火吗？这是我的代码:

<script type="text/javascript">
$(document).ready(function() {
   $(window).resize(function() {
    //small-screen
    if (window.innerWidth < 768) {$('#smiling-model').html('');}
    //end small-screen
    else if (window.innerWidth >= 768) {
        $('#smiling-model:empty').append('<img id="#smiling-model-img" src="images/smiling-model-500x456px.jpg" alt="Great Smile" />');
            }
    }).resize(); // trigger resize event
});
</script>

这里是实际网站的链接:http://www.orlickdental.com/

谢谢大家!

奥马尔

Answer 1

据我所知，低于版本 9 的 Internet Explorer 不支持 window.innerWidth

有关更多信息，请查看此 DOM Compatibility information由古老的 Quirksmode 提供:)

由于您已经在使用 jQuery，因此您可以依赖 $(window).width()。然而，本着求知的精神，掌握窗口的尺寸始终是 IE 的一个问题。主要方法是依赖 body 元素的尺寸(使用 body.clientWidth) 或实际插入一个用 css 设计的特定 div 来填充窗口的尺寸(然后从该元素读取尺寸)。 jQuery 现在显然剥夺了它的所有乐趣;)