Por exemplo, vamos supor que você crie duas versões de menu, uma para o mobile, outra para desktop.
Ou você quer uma funcionalidade diferente para um carrossel, quando o usuário estiver no celular.
Então você pode ocultar um elemento ou adicionar uma ação diferente de acordo com a tela.
$(window).resize(function() { // Nesta parte tenho duvida
var divcarrossel = document.getElementById('meucarrossel');
var menuLogoPlace = document.getElementById('meuMenuLogo');
if ($(document).innerWidth() < 600) {
divcarrossel.addEventListener('touchstart', funcaoStartTouch, false);
divcarrossel.addEventListener('touchmove', funcaoStopTouch, false);
menuLogoPlace.innerHTML = "<img src='versaoVerticalLogo.png'>";
} else {
divcarrossel.removeEventListener('touchstart', funcaoStartTouch, false);
divcarrossel.removeEventListener('touchmove', funcaoStopTouch, false);
menuLogoPlace.innerHTML = "<img src='versaoHorizontalLogo.png'>";
}
});
No exemplo acima, eu associei uma funcao ao toque (mobile) em um carrossel e a removi no desktop.
Também exibi uma versão vertical do logo no mobile e uma horizontal no desktop.
Repare que só associei a função à ação, não existe no script a funcaoStartTouch e funcaoStopTouch. Também presumi que existem os elementos DIV chamados na função. Isso é um exemplo apenas. Também (por força do hábito) usei js puro no script.
