Losing media query matching after switching portrait-landscape-portrait

9
votes

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.

3
javascriptgoogle-chromecssmedia-queriesgalaxy-tab
Did You solved the problem? – Rob
I had 100% the same problem as you, and using max-width instead of max-device-width solved – artdias90
artdias90, thanks for your advice! Removing "device" from query worked for me. – Demven Weir

3 Answers

1
votes

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

1
votes

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 */
0
votes

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.