Databases
StackOverflow2013
Postsdbo
POAndroid browser media queries break on rotation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAndroid browser media queries break on rotation
    text
    copied!<p>I am experience strange behavior on my site with the default Android browser, with regards to the CSS media queries I am using. </p> <p>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. </p> <p>Example CSS:</p> <pre><code>.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% } } </code></pre> <p>Diagram to better explain the issue:</p> <p><img src="https://i.stack.imgur.com/3Vpid.jpg" alt="graphic displaying media query issue"> This only seems to be happening on the default Android browser, it happens with no other browser.</p> <p><strong>Justification for complicated look of media queries</strong>: They seem to work best across all browsers, I've had issues with IE9 when just using one 'min-width' statement.</p> <p>I also thought I would include the <code>&lt;meta&gt;</code> tags I am using, they are:</p> <pre><code>&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" /&gt; </code></pre> <p>Can anyone tell me what is causing this strange Android behavior? Is this some sort of bug?</p> <p>Thanks for reading.</p> <p><strong>NOTE</strong> Scrollbars must be present for it to act like this</p> <h2>Update #1</h2> <p>Using the following media queries, everything works as expected: </p> <pre><code>.box { width:100%; } @media screen and (min-width:480px) { .box { width:33.333%; } } </code></pre> <p>I'm presuming there is some issue with how Android deals with the min/max-device-width options or they are conflicting. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload