0
我有一个小型的响应横幅项目与jQuery和我重新创建我的旗帜上响应平板电脑和手机，但我的条件是不正常工作。为什么我的window.width方法无法正常工作？
On tablet：tabletSlider（）;必须在手机上运行 ：mobileSlider（）;必须在网上工作 ：webSlider（）;必须重新工作，但只有tabletSlider（）;如果您在平板电脑上检查它，它正在工作。
// Web banner
function webSlider() {
var sources = $('#mycarousel .item img').map(function() {
return $(this).data('web-src');
});
$.each(sources, function(index, value) {
$(".tablet-banner,.mobile-banner").remove();
$(".web-banner").append("<div class='item'><img src='" + value + "'></div>");
$('.web-banner').find('.item:first-child').addClass('active');
})
};
// Tablet banner
function tabletSlider() {
var sources = $('#mycarousel .item img').map(function() {
return $(this).data('tablet-src');
});
$.each(sources, function(index, value) {
$(".web-banner").remove();
$(".tablet-banner").append("<div class='item'><img src='" + value + "'></div>");
$('.tablet-banner').find('.item:first-child').addClass('active');
})
};
// Mobile banner
function mobileSlider() {
var sources = $('#mycarousel .item img').map(function() {
return $(this).data('mobile-src');
});
$.each(sources, function(index, value) {
$(".tablet-banner,.web-banner").remove();
$(".mobile-banner").append("<div class='item'><img src='" + value + "'></div>");
$('.mobile-banner').find('.item:first-child').addClass('active');
})
};
$(window).on('resize', sliderControl)
function sliderControl() {
var vn = $(window).width();
var large = 1024;
var tablet = 767;
var mobil = 480;
if (vn > large) {
webSlider();
} else if (vn < tablet) {
tabletSlider();
} else if (vn < mobil) {
mobileSlider();
}
}
$(document).ready(function() {
sliderControl();
})#mycarousel {
height: 400px;
}
.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
height: 400px;
width: 100%;
}
.divs {
width: 300px;
margin: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner web-banner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/1000/300?image=68" data-web-src="https://unsplash.it/1000/300?image=68" data-tablet-src=" https://unsplash.it/1000/300?image=21" data-mobile-src="https://unsplash.it/500/600?image=1">
</div>
<div class="item">
<img src="https://unsplash.it/1000/300?image=43" data-web-src="https://unsplash.it/1000/300?image=43" data-tablet-src="https://unsplash.it/1000/300?image=1001" data-mobile-src="https://unsplash.it/500/600?image=2">
</div>
<div class="item">
<img src="https://unsplash.it/1000/300?image=67">
</div>
<div class="item">
<img src="https://unsplash.it/1000/300?image=47" data-tablet-src="https://unsplash.it/1000/300?image=1005">
</div>
<div class="item">
<img src="https://unsplash.it/1000/300?image=72" data-mobile-src="https://unsplash.it/500/600?image=3">
</div>
<div class="item">
<img src="https://unsplash.it/1000/300?image=80" data-web-src="https://unsplash.it/1000/300?image=80" data-tablet-src="https://unsplash.it/1000/300?image=84">
</div>
</div>
<div class="carousel-inner tablet-banner" role="listbox">
</div>
<div class="carousel-inner mobile-banner" role="listbox">
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>
为什么不使用['window.matchMedia（）']（https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia）呢？ –
即9 + 10不支持这就是为什么 –
它支持IE 10 –