Ajuda com media-query javascript.
Ola Bom dia, Boa Tarde ,Boa Noite creio que este post ira ajudar muitas pessoas .
Possuo uma duvida sobre "media-query" com javascript ou Jquery.
Não possou muito conhecimento mas acredito que seja algo simples a se criar.
Sei da forma que deve se fazer porem não sei a forma que irei escrever o código.
Medias-Query CSS não serve para este exemplo.
um exemplo:
No exemplo a seguir conseguiria utiliza facilmente em um site mobile.
porem no meu arquivo arquivo slider.exemplo ultiliza um tamanho;
aspectRatio: "4:2" para descktop
aspectRatio: "4:4" para mobile
$(window).resize(function(){
if ($(window).width() <= 400){ // Mobile
document.write("<script src='/js/slider.exemplo.mob.js'></script>"); //Mobile
}
else {
document.write("<script src='/js/slider.exemplo.all.js'></script>"); //Descktop
}
});
Porem notei um problema e si a pessoa utilizar o smashtphone no formato landscape a imagem ira ser muito maior que a tela do smartphone teria um problema bem chato.
acabei buscando um codigo que fosse parecido ao inves de especificar a resolução minima usaria "Landscape" ou "Portrait".
achei alguns porem sem muita ultilidade caso ninguem conheça uma forma de fazer isso.
uma ideia seria
se width for maior que o height = seria o mesmo que o landscape.
se o height for maior que o width = seria um portrait.
se o height for igual ao width = seria um partrait
$(window).resize(function(){
if ($(window).width >+ height()){
// do something here
}
});
algo assim...
Discussão (0)
Carregando comentários...