Question

I have installed the css defaults in the less 4 framework. They provide media queries that change the body declaration based on the “browser size”. I added declarations to change the body background-color so I can see which media query is kicking in as I scale my google chrome browser on my desktop.

default desktop color is white. Then I have tablet layout and mobile layout as such:

  /*        Tablet Layout: 768px.
    Gutters: 24px.
    Outer margins: 28px.
    Inherits styles from: Default Layout.
 -----------------------------------------------------------------
  cols    1     2      3      4      5      6      7      8 
  px      68    160    252    344    436    528    620    712    */

 @media only screen and (min-width: 768px) and (max-width: 991px) {

body {
    width: 712px;
    padding: 10px 20px 60px;
    background-color:yellow;
}
}
/*      Mobile Layout: 320px.
    Gutters: 24px.
    Outer margins: 34px.
    Inherits styles from: Default Layout.
 ---------------------------------------------
       cols    1     2      3 
       px      68    160    252    */

@media only screen and (max-width: 767px) {

body {
    width: 252px;
    padding: 10px 20px 60px;
    background-color:pink;
}

}

It changes color when when I resize my desktop browser. But when I open the page in my HTC sensation android browser, it’s yellow. Clearly the media query is not kicking in for my browser’s “size”. I have also read that there is something called viewport, which perhaps is scaling the page in my mobile phone such that the browser resolution is not meeting the media query threshold. How do I remedy this so that the correct media query kicks in for my mobile phone?

Answer 1

use device-width as your default for iOS and Android then extend the media query with orientation for iOS only