Losing media query matching after switching portrait-landscape-portrait

Question

I really don't know what to do with this, I have a galaxy Tab 2, 7 inches tablet and using chrome as the browser (v26.0.1410.58) in Android 4.1.1. I'm loading the web app in portrait mode and the media query matches just fine, I switch it to landscape mode, and everything works good too, but when I switch it back to portrait mode, the browser just doesn't apply any style at all, and debugging the app with the tablet usb connected to the PC, I can see chrome didn't find a match with any media query anymore.

The media query I'm applying is:

(device-width: 600px) and (max-device-height: 1024px) and (max-width: 600px) and (min-device-height: 976px) and (orientation: portrait)

If I check the device's width and height in the browser after and before this happens, they don't change at all either.

Some data that may be useful:

screen.width: 600

screen.height: 976

$(window).width(): 600

It's only happening in this device and I need to support the app in this tab.

Answer 1

I don't have your device to test on, but I usually stick to simpler media queries.

Perhaps trying just max-width instead of device-width. I find that doing this coupled with percentage based layouts means I am not device-specific with my layouts.

@media (max-width: 600px) { ... }