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.

Venepuncture

Did You solved the problem? – Pitchford

I had 100% the same problem as you, and using max-width instead of max-device-width solved – Nadler

artdias90, thanks for your advice! Removing "device" from query worked for me. – Pomace

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) { ... }

Threephase

The problem is that I need very specific media query because the app is going to have to support a lot of devices. Also, using max-width instead of device-width will make the media queries to overlap each other in some cases. – Venepuncture

My suggestion would be to go fluid to accommodate more devices. Use max-width for all your media queries, chose a few breakpoints and then use percentages for your element widths. In this fashion, you can serve content to nearly any device. I know that's vague, but hopefully it's helpful in some way. I design a lot of mobile content, and I've had no issues of this type. My designs scale back and forth (from portrait to landscape) with no issues on the devices I've tested with. – Threephase

Answer 2

Orientation media queries are a real pain to support... I would advise to stay away from them. I've got a really good set of media queries that I use. I just reverse engineered Zurb's Foundation media queries. See below...

// Small screens
@media only screen { }
/* Define mobile styles */

@media only screen and (max-width: 40em) { }
/* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em) { }
/* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { }
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { }
/* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { }
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { }
/* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { }
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { }
/* min-width 1921px, xxlarge screens */

Husky

Answer 3

You should try

@media only screen and (max-device-width: 600px) { /* STYLES GO HERE */}
/* styles apply only in portrait mode */

@media only screen and (min-device-width: 601px) { /* STYLES GO HERE */}
/* styles apply only in landscape mode */

If you need a style to work only in between the range of your device... Obs: write the orientation bit only if you want the styles to apply in one of the two.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

Drop the other values you've declared, it's creating a conflict because of the height.

Statis