Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia pessoal, estou com um problema para utilizar a tag picture no Safari, pelo que pesquisei o maldito Safari não reconhece a tag... Logo não sei como proceder... Segue código exemplo abaixo:
<picture alt = 'Alt'>
<source media = '(min-width: 1600px)' srcset = '/img/imagem.jpg'/>
<source media = '(min-width: 1366px)' srcset = '/img/imagem.jpg'/>
<source media = '(min-width: 1280px)' srcset = '/img/imagem.jpg'/>
<source media = '(min-width: 960px)' srcset = '/img/imagem.jpg'/>
<source media = '(min-width: 768px)' srcset = '/img/imagem.jpg'/>
<source media = '(min-width: 480px)' srcset = '/img/imagem.jpg'/>
<source media = '(min-width: 1px)' srcset = '/img/imagem-mobile.jpg'/>
<img src = '/img/banners/imagem.jpg' alt = 'Alt' title = 'Title'/>
</picture>A minha intenção é utilizar uma outra imagem quando o tamanho da tela estiver entre 1px e 479px... Já que o Safari me deixou na mão, preciso de outra solução!
Bom, sua unica solução na minha opinião é implementar isso em javascript. Como você bem falou essa tag não é suportado pelo safari. Eu até tentei procurar algum projeto para agilizar o seu trabalho, mas não encontrei nada. Então o jeito é tu partir para o desenvolvimento caso queira dar suporte para esse navegador.
Você deverá fazer as verificações de resoluções no JS e alterar o "src" da tag "img" para imagem apropriada.
Boa noite, e boa sorte.