Android browser media queries break on rotation

Question

I am experience strange behavior on my site with the default Android browser, with regards to the CSS media queries I am using.

The problem is such that everything works fine, but as soon as I rotate my device to landscape, it picks up and applies the CSS for wider screens; however when I then rotate back to portrait, the CSS for wider screens is still applied. If I rotate my phone landscape, then back to portrait, then refresh, the correct thinner screen CSS is once again applied.

Example CSS:

.box {
  width:100%;
}

@media
 screen and (min-width:480px) and (max-width:599px),
 screen and (min-device-width:480px) and (max-device-width:599px)
{
  .box {
    width:33.333%
  }
}

Diagram to better explain the issue:

graphic displaying media query issue This only seems to be happening on the default Android browser, it happens with no other browser.

Justification for complicated look of media queries: They seem to work best across all browsers, I've had issues with IE9 when just using one 'min-width' statement.

I also thought I would include the <meta> tags I am using, they are:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

Can anyone tell me what is causing this strange Android behavior? Is this some sort of bug?

Thanks for reading.

NOTE Scrollbars must be present for it to act like this

Update #1

Using the following media queries, everything works as expected:

.box {
  width:100%;
}

@media screen and (min-width:480px) {
  .box {
    width:33.333%;
  }
}

I'm presuming there is some issue with how Android deals with the min/max-device-width options or they are conflicting.

Delete the question if you already have your answer or post that as the answer :) — DaniP, Dec 02 '13 at 14:08

score 2 · Accepted Answer · edited May 23 '17 at 12:30

It seems that I was incorrectly making use of the min/max-width and min/max-device-width statements (they were conflicting with each other), this became obvious after reading the accepted answer to this question on StackOverflow.

It seems min/max-width refers to the target display area size and min/max-device-width refers to the entire devices rendering area (its screen).

The correct CSS to use in this case is:

.box {
  width:100%; 
}

@media screen and (min-width:480px) {
  .box {
    width:33.333%;
  }
}

Android browser media queries break on rotation

Update #1

1 Answers1