Question

Chrome使用以下代码锁定。 Chrome会进行无限旋转并在几次调整大小事件后停止登录到控制台，甚至可能是1.有时候我必须杀死Chrome进程。我无法在FF或IE中重现它。我也无法使用similar code重现div背景颜色而不是样式表的问题。

三个样式表只需更改background-color

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link id="size-stylesheet"  rel="stylesheet" href="/Content/wide.css" />
    <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
    <h1>This page is Responsive!</h1>
            <script type="text/javascript">
                function adjustStyle(width) {
                    console.log('adjusting style...');
                    width = parseInt(width);                                        
                    if (width < 1283) {
                        $("#size-stylesheet").attr("href", "/Content/narrow.css");
                    } else if ((width >= 1283) && (width < 1419)) {
                        $("#size-stylesheet").attr("href", "/Content/medium.css");
                    } else {
                        $("#size-stylesheet").attr("href", "/Content/wide.css");
                    }
                }

                $(function () {
                    adjustStyle($(this).width());
                    $(window).resize(function () {
                        console.log('resize fired...');
                        adjustStyle($(this).width());
                    });
                });
        </script>
</body>
</html>

注意，我需要支持非HTML5浏览器，如IE8和IE7。所以任何解决方案都需要考虑到这一点。

Answer 1

使用媒体查询。

然后，如果支持＆lt; = IE8，请使用IE条件注释为这些浏览器加载JS解决方法：

<![if lte IE 8]>
<script src="IEsucks.js"></script>
<![endif]-->

通过这种方式，您不会使用额外的JS来惩罚好的浏览器，并且您的网站已经是未来的证明。

（所有这一切：我会质疑您的响应式网站必须在旧版本的IE中工作的要求。您真的有很多网站用户坚持在他们的手机上使用旧版本的IE ？）

Answer 2

如果您使用JS，则可以使用matchMedia设置媒体查询条件：

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the view port is at least 400 pixels wide */
} else {
  /* the view port is less than 400 pixels wide */
}

https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

这是an article on CSS media queries（在JS中也用作matchMedia的参数）。

有关更多实际示例，请查看某些CSS框架的代码，例如： Twitter Bootstrap或Foundation。

JavaScript中的与IE＆lt; = 8 的兼容性有一个polyfill：paulirish / matchMedia.js。您只需将其包含在其他脚本之前，也可以在MS条件注释中包含它。

或者只是编写CSS并使用JS polyfill：scottjehl / Respond

Answer 3

应用媒体查询，将您拥有的规则放在css文件中：

@media only screen and (max-width: 1283px) {
    /* narrow */
}

@media only screen and (max-width: 1419px) {
    /* medium */
}

@media only screen and (min-width: 1419px) {
    /* wide */
}

Answer 4

以下代码根据当前浏览器宽度切换样式表。我在IE7，IE10，Chrome v33和FF v28中进行了测试。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>    
    <!--[if gt IE 8]><!-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <link rel="stylesheet" media="(min-width: 0px) and (max-width: 1282px)" href="Content/narrow.css" />
    <link rel="stylesheet" media="(min-width: 1293px) and (max-width: 1419px)" href="Content/medium.css" />
    <link rel="stylesheet" media="(min-width: 1420px)" href="Content/wide.css" />
    <!--<![endif]-->
    <!--[if lt IE 9]>
        <link id="size-stylesheet" rel="stylesheet" href="Content/narrow.css" />
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script type="text/javascript">
            function adjustStyle(width) {
                width = parseInt(width);

                if (width < 1283) {
                    $("#size-stylesheet").attr("href", "Content/narrow.css");
                } else if ((width >= 1283) && (width < 1419)) {
                    $("#size-stylesheet").attr("href", "Content/medium.css");
                } else {
                    $("#size-stylesheet").attr("href", "Content/wide.css");
                }
            }

            $(function () {
                adjustStyle($(this).width());
                $(window).resize(function () {
                    adjustStyle($(this).width());
                });
            });
        </script>
        <![endif]-->
</head>
<body>
    <h1>This page is Responsive!</h1>
</body>
</html>

值得注意的一些事情：

请勿在Chrome中使用Javascript在窗口调整大小时切换样式表。
jQuery 2.X不支持IE7。
媒体查询非常适合HTML5浏览器。否则，添加HTML5支持作为polyfill（如此处所示的E.G.html5.js）。并使用JavaScript切换CSS表。
代码使用Downlevel-revealed conditional comments在非IE浏览器上有条件地运行代码
要进行测试，请创建3个CSS文件，然后只需更改body {background-color: }

Answer 5

你调用adjustSstyle太多了。第一次调用init，然后它可能会改变大小并从resize再次调用它。也不确定为什么你的代码嵌入了头脑中。

Answer 6

工作示例：http://jsfiddle.net/ErURP/4/

使用setTimeout，clearTimeout和http://yepnopejs.com实施回调功能：

$(function(){
  $narrow_css = "http://f.cl.ly/items/3Y2P2q022R0B3X163c31/narrow.css";
  $medium_css = "http://f.cl.ly/items/3c2P3Z180l1s0j3S2v3k/medium.css";
  $wide_css = "http://f.cl.ly/items/2i0l3s1Z3K262z3X2X1e/wide.css";
  $resize_timer = null;
  $resize_timeout = 100;
  $css_tags = ['narrow','medium','wide'];

  function remove_css_tag(arr) {
    $.each(arr, function(i,v) {$('head [href*="'+v+'"]').remove();});
  }
  function resize_callback() {
    var width = $(window).width();
    remove_css_tag($css_tags);
    console.log('resize fired');
    console.log('screen width: ' + window.screen.width);
    console.log('window width: ' + width);

    if (width < 500) {
      yepnope.injectCss($narrow_css);
    } else if ((width >= 500) && (width <= 850)) {
      yepnope.injectCss($medium_css);
    } else {
      yepnope.injectCss($wide_css);
    } 
  } 

  $(window).resize(function() {
    clearTimeout($resize_timer);
    $resize_timer = setTimeout(resize_callback, $resize_timeout);
  });

  // init
  resize_callback();
});

简单响应页面会导致Chrome进程冻结

6 个答案: