Css3 is not working on Cordova

Question

I’m trying to use media queries in my application developed with Cordova, however it is not working, the code is as follows:

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

What I would like to do is: When the resolution is less than 740px the background use an image. In case it is larger, the background would be red.

When I am developing websites I use these same commands mobile is not working, even defining the 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" />

You’re making a mistake in inspects:

The key "target-densitydpi" is not supported.

How can I fix this?

Answer 1

The syntax of @media-querie is wrong, the class has to stay inside it and not outside:

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

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