Chrome 使用以下代码锁定。 Chrome 将进入无限旋转状态,并在几次调整大小事件甚至 1 次后停止记录到控制台。 有时我不得不杀死Chrome进程。 我无法在FF或IE中重现它。 我也无法用翻转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。 因此,任何解决方案都需要考虑到这一点。
使用媒体查询。
然后,如果您必须支持 <=IE8,请使用 IE 条件注释为这些浏览器加载您的 JS 解决方法:
<![if lte IE 8]>
<script src="IEsucks.js"></script>
<![endif]-->
这样你就不会用额外的JS惩罚好的浏览器,而且你的网站已经是面向未来的。
(综上所述:我会质疑您的响应式网站必须在旧版本的IE中工作的要求。你真的有很多网站用户坚持在手机上使用旧版本的IE吗?
应用媒体查询,将您在 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 */
}
如果使用 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
这是一篇关于CSS媒体查询的文章(在JS中也用作matchMedia
的参数)。
有关更实际的示例,请查看一些CSS框架的代码,例如Twitter Bootstrap或Foundation。
在 JavaScript 中,有一个与 IE 兼容的 polyfill<= 8:paulirish/matchMedia.js。您只需将其包含在其他脚本之前,也许包含在 MS 条件注释中。
或者只是编写CSS并使用JS填充:scottjehl/Response。
以下代码根据当前浏览器宽度切换样式表。 我在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 支持添加为填充代码(例如 html5.js如下所示)。 并使用 JavaScript 切换 CSS 工作表。
- 该代码利用下层显示的条件注释在非 IE 浏览器上有条件地运行代码
- 为了进行测试,创建 3 个 CSS 文件并简单地更改
body {background-color: }
你对 adjustSstyle 的调用太多了。 第一次调用 init,然后它可能会更改大小并从调整大小再次调用它。也不确定为什么你的代码没有嵌入到头部中。
工作示例: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();
});