CSS media query not detecting orientation change

Question

I am using Cordova to make a hybrid app.

I have the following media queries in my css file

    @media only screen and (min-device-width : 320px) and (orientation: portrait) {
        /*css goes here*/
     }

    @media only screen and (min-device-width : 320px) and (orientation: landscape) {
        /*css goes here*/
    }

and similarly media queries for all sorts of device width in both portrait and landscape orientation.

When I test my app on Nexus 4, it doesn't detect the orientation change and change the css, example, if I start the app in portrait mode, then based on the device width it picks up the media query of that width in the portrait mode, however if then I change the orientation of the phone, it doesn't detect the new width and apply the new css of the corresponding width and landscape orientation and vice versa.

Am I missing something here, isn't CSS Media query supposed to detect the change in orientation by itself and apply the appropriate CSS?

Try min-width instead of min-device-width to check if this also does not work. — rockStar
min-width worked! On the actual devices that is, in chrome device emulation it's not working for some reason. — Arnav Sengupta
sometimes there are dependencies that an emulator can't show, so we need to test it into actual devices. I think you need to tweak your emulator for it to work there too. Try searching it will help xD — rockStar
Even when the media query itself is correct, a Cordova / PhoneGap app on iOS may still require some JavaScript to actually process the orientation change to landscape and therefore get to the CSS. See stackoverflow.com/questions/10999435/… ... which took me quite awhile to find. — Scott Lawton
@rockstar - You should have added your comment as an answer as this was helpful for me as well. "min-width" instead of "min-device-width" served my media queries properly on orientation change. — GJSmith3rd

g_blott g_blott · Accepted Answer · 2014-11-14T15:50:43

I also had an issue with this, where I would have a specific media query for portrait landscape and another for landscape, and it would switch fine from portrait to landscape the first time, but when you went back it wasn't updating.

@rockStar should get the credit for the answer, but using min-width instead of min-device-width did the trick for me as well.

CSS media query not detecting orientation change

3 Answers