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

有关更多信息，请查看好的旧Quirksmode提供的DOM Compatibility information：）

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

Answer 2

使用$(window).width()，但请确保页面未以怪异模式呈现，因为jQuery 1.8中的更改（IE返回0的宽度）。

简短回答：在页面开头使用<!DOCTYPE html>。

Answer 3

$(this).width()：

怎么样？

$(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

Answer 4

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

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

以下是演示：http://jsfiddle.net/FpReh/

Answer 5

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

而是使用$(window).width();

jQuery resize（）在IE8中不起作用

5 个答案: