2

Estou tentando utilizar media queries no meu aplicativo desenvolvido com o Cordova, porem ele não esta funcionando, o código é o seguinte:

#backgroundIndex{
    @media screen and(max-width: 1200px){
        background: red;
    }
    @media screen and(max-width: 740px){
        background: url('../img/background.jpg') repeat top left;
    }
}

O que eu gostaria de fazer é: Quando a resolução for menor que 740px o background use uma imagem. No caso de ser maior, o background seria vermelho.

Quando estou desenvolvendo sites utilizo estes mesmos comandos porém no mobile não esta funcionando, mesmo definindo o viewport:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Está dando um erro no inspec:

The key "target-densitydpi" is not supported.

Como posso resolver isto?

3
  • Vinicius, minha formatação foi apenas para colocar seu código na formatação correta! 17/08/2015 às 15:02
  • Parece que esse atributo não é suportado pelo iOS e deprecated no Android. Já tentou usar max-device-width ao invés de max-width? 17/08/2015 às 15:17
  • Ainda não esta funcionando utilizei max-device-width 17/08/2015 às 15:30

1 Resposta 1

1

A sintaxe do @media-querie está errada, a classe tem que ficar dentro dele e não fora:

@media screen and(max-width: 1200px){
    #backgroundIndex {
        background: red;
    }
}

@media screen and(max-width: 740px){
    #backgroundIndex {
        background: url("../img/background.jpg") repeat top left;
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .