媒体查询不适用于iPhone 5横向

Question

I'm using media queries to do a simple background color change and it doesn't work on iphone 5. I'm not sure if my queries are wrong or not but here is my meta tag:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

and here are my media queries:

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
   .loginPage
    {
        background: red !important;
    }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
   .loginPage
   {
       background: green !important;
   }

}

the red background is working but when I rotate my device the background doesn't change to green. any help would be appreciated.

Answer 1

Try the following. Increase the size of the landscape orientation. I believe that when you turn the iPhone into landscape mode you will now have a much higher device width.

You can try increasing the landscape max-width to 1136px, which should be the iPhone 5's width in landscape mode. If this does not work I would recommend increasing the size of the max width to a crazy large number and work your way down to eliminate the problem.