Nexus 7 screen.width returns 800 but media query max-width: 720px still applies

I have a Google Nexus 7 tablet I'm using for testing some responsive designs. In Javascript, the screen.width returns as 800px, as expected (the native resolution).

How come the following media query is picked up by the tablet when the max width of the screen is > 720px?

@media only screen and (max-width: 720px) and (orientation: portrait) {
    .test{ background: red;}
}