How to target Galaxy Nexus and Nexus 7 with media queries?

Question

I have two devices that I\'m testing site design with. Samsung Galaxy Nexus and Asus Nexus 7 tablet. I\'m having a really hard time figuring out how to target these individu

Answer 1

I have a Nexus 7 and I have try your sricpt. The problem is that every browser have a different viewport. So it's complex to have a correct result.

@media only screen and (device-width : 800px) and (orientation: portrait) {
    #device:after {
        content: "Nexus 7 - portrait - firefox";
    }
}
@media only screen and (width : 603px) and (orientation: portrait) {
    #device:after {
        content: "Nexus 7 - portrait - chrome";
    }
}
@media only screen and (device-width : 1280px) and (orientation: landscape) {
    #device:after {
        content: "Nexus 7 - landscape - firefox";
    }
}
@media only screen and (width : 966px) and (orientation: landscape) {
    #device:after {
        content: "Nexus 7 - landscape - chrome";
    }
}

I don't have time to make Opera.

You can view the result here with your Nexus 7