Wanderson Moreira 2 Denunciar post Postado Julho 16, 2016 Boa Noite! tenho um projeto que é responsivo e na pagina inicial possui um banner rotativo.. queria saber como faço pra que esse banner nao seja exibido quando a largura da tela for menor q 480px.. eu pensei em pegar a div q tem o banner e colocar 0px com overflow hidden, porem se eu fizer isso as imagens vao ser carregadas do mesmo jeito, apenas nao serao exibidas e a inteçao era remover a div pra nao pesar o carregamento em versao mobile desde ja obrigado! Compartilhar este post Link para o post Compartilhar em outros sites
allex_carvalho 124 Denunciar post Postado Julho 16, 2016 Uma alternativa é chamar o banner com jQuery. Use o .width para verificar a largura da página. Se for Maior ou igual ao desejado, chama o banner com ajax. Compartilhar este post Link para o post Compartilhar em outros sites
Kakashi_Hatake 267 Denunciar post Postado Julho 17, 2016 Usando javascript você verifica a largura e imprime na tela se for maior que 480px <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var x = document.getElementById( "demo" ); if( w > 480 ) { x.innerHTML = "Browser inner window width: " + w + ", height: " + h + "."; } </script> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
L. Henrique 179 Denunciar post Postado Julho 18, 2016 Wanderson, Carlos e Alex.Com o HTML5 já está deixando de existir a necessidade do uso de JavaScript para tal função. Agora isso pode ser implementado utilizando <picture> com <source>. Para questões cross-browsing, aconselho também o uso de JavaScript. :)Vejam um exemplo: <picture> <source media="(max-width: 300px)" srcset="imagem-300px.jpg"> <source media="(max-width: 600px)" srcset="imagem-600px.jpg"> <source media="(max-width: 900px)" srcset="imagem-900px.jpg"> <img src="imagem-normal.jpg" alt="Texto alternativo (SEO)"> </picture> Confiram o tópico que fala sobre esses elementos de forma bem completa: http://www.html5rocks.com/en/tutorials/responsive/picture-element/?redirect_from_locale=ptAbraços! Compartilhar este post Link para o post Compartilhar em outros sites
angelorubin 142 Denunciar post Postado Julho 18, 2016 Com media queries. https://developer.mozilla.org/pt-PT/docs/Web/CSS/Consulta_de_m%C3%ADdia Compartilhar este post Link para o post Compartilhar em outros sites
Wanderson Moreira 2 Denunciar post Postado Julho 18, 2016 Vlw pessoal, vou testar essa solução do Carlos e a do L.Henrique, provavelmente dará certo! Compartilhar este post Link para o post Compartilhar em outros sites
