jQuery resize（）在IE8中不起作用

我被难住了。。。我正在建立一个响应迅速的网站，只在更大的屏幕上加载一个大的图形。它在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>

以下是实际站点的链接：

谢谢大家

Omar

那么$this.width呢

那么$this.width呢：

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

有关更多信息，请查看“由良好的旧Quirksmode提供”选项：

由于您已经在使用jQuery，因此可以依赖$window.width。然而，本着知识的精神，IE始终存在着获取窗口尺寸的问题。主要的方法是使用body.clientWidth依赖body元素的尺寸，或者实际插入一个特定的div，该div使用css填充窗口尺寸，然后从该元素读取尺寸。jQuery现在显然把所有的乐趣都带走了

据我所知，9版以下的Internet Explorer不支持window.innerWidth

有关更多信息，请查看“由良好的旧Quirksmode提供”选项：

---

由于您已经在使用jQuery，因此可以依赖$window.width。然而，本着知识的精神，IE始终存在着获取窗口尺寸的问题。主要的方法是使用body.clientWidth依赖body元素的尺寸，或者实际插入一个特定的div，该div使用css填充窗口尺寸，然后从该元素读取尺寸。jQuery现在显然把所有的乐趣都带走了

对于浏览器兼容性，我建议使用$window.width而不是window.innerWidth

---

下面是一个演示：

为了与浏览器兼容，我建议使用$window.width而不是window.innerWidth

---

下面是一个演示：

在IE8的控制台中，我检查了window.innerWidth值，它返回未定义的值

---

而是使用$window.width

在IE8的控制台中，我检查了window.innerWidth值，它返回undefined

而是使用$window.width

使用$window.width，但请确保页面不会以怪癖模式呈现，因为IE的宽度返回0

简短回答：在页面的开头使用。

使用$window.width，但请确保页面未在“怪癖”模式下呈现，因为IE的宽度返回0

---

简短回答：在页面开始时使用。

window.innerWidth最初是在IE9中支持的，因为在768像素之前，模型的头像会跳到巨大的尺寸，这有点奇怪。你也有超过。IE讨厌无效的HTML.window.innerWidth最初是在IE9中支持的，因为在768像素之前，模型的头像跳到了巨大的尺寸，这有点奇怪。你也有超过。IE讨厌无效的HTML.pebbl-你既是学者又是绅士！对于解决方案和背景信息。。。它就像一个符咒！我试着投你一票，但我不同意你的意见，因为我在这里还是个新手。@ojbravo-谢谢，很高兴这有帮助！哦，别担心。。。我自己也只是一个星期左右的新手了：佩伯，你既是学者又是绅士！对于解决方案和背景信息。。。它就像一个符咒！我试着投你一票，但我不同意你的意见，因为我在这里还是个新手。@ojbravo-谢谢，很高兴这有帮助！哦，别担心。。。我自己也只是一个星期左右的新手了：

$(window).resize(function() {
    //small-screen
    var w = $(this).width();
    if (w < 768) {
       $('#smiling-model').html('');
    }
    //end small-screen
    else if (w >= 768) {
        $('#smiling-model:empty').append('<img id="#smiling-model-img" src="images/smiling-model-500x456px.jpg" alt="Great Smile" />');
    }
 }).resize(); // trigger resize event

$(document).ready(function() {
   $(window).resize(function() {

    //cache the width of the viewport
    var width = $(window).width();

    //and check it's value
    if (width < 768) {$('#smiling-model').html('');}
    //end small-screen
    else if (width >= 768) {
        $('#smiling-model:empty').append('<img id="#smiling-model-img" src="images/smiling-model-500x456px.jpg" alt="Great Smile" />');
            }
    }).resize(); // trigger resize event
});