Android : Android Media Queries not working as expected

I have the following CSS (LayoutSelector.css):

@import url("layout.css") screen;

/* -------------------- small screen -----------------------------*/



@media screen and (max-width: 720px) {
        .contentwrapper
        {width:600px;
            margin:0 auto; text-align: left ; border:1px solid blue;}

        #main  {width:100%; text-align: center ;  background:#FFFFFF;margin-bottom:10px}
        .main-content {position:relative; min-height:300px;height:auto !important;height:100%;width:100%;    margin:0 auto; padding:0;   text-align:left;}
        .header {width:100%; margin:0 auto; text-align: left ; margin:0 auto; background:#FFFFFF;}

         .SiteTitle 
         {

                font-family:'Ubuntu';
                line-height: 1.2em;
                float:right;
                color:Red;
                font-weight:900;
                font-size: 1.5em;
                padding-top:10px;
                 text-shadow:0px 0px 0 rgb(0,0,0),1px 1px 0 rgb(-34,74,52),2px 2px 0 rgba(0,0,0,0.2), 3px 3px 0 rgb(200,200,200),4px 4px 3px rgba(255,255,255,0),4px 4px 1px rgba(255,255,255,0.5),0px 0px 3px rgba(0,0,0,.2);
         }



        .SiteTitle a {text-decoration:none;}
        .SiteTitle active {text-decoration:none;}

}

/* -------------------- big screen -----------------------------*/
@media screen and  (min-width: 721px) and (max-width: 1024px) {
        .contentwrapper
        {width:700px;
            margin:0 auto; text-align: left ; border:1px solid blue;}

        #main  {width:100%; text-align: center ;  background:#FFFFFF;margin-bottom:10px}
        .main-content {position:relative; min-height:300px;height:auto !important;height:100%;width:100%;    margin:0 auto; padding:0;   text-align:left;}
        .header {width:100%; margin:0 auto; text-align: left ; margin:0 auto; background:#FFFFFF;}

         .SiteTitle 
         {

                font-family:'Ubuntu';
                line-height: 1.2em;
                float:right;

                color:Blue;
                font-weight:900;
                font-size: 1.5em;
                padding-top:10px;
                 text-shadow:0px 0px 0 rgb(0,0,0),1px 1px 0 rgb(-34,74,52),2px 2px 0 rgba(0,0,0,0.2), 3px 3px 0 rgb(200,200,200),4px 4px 3px rgba(255,255,255,0),4px 4px 1px rgba(255,255,255,0.5),0px 0px 3px rgba(0,0,0,.2);
         }



        .SiteTitle a {text-decoration:none;}
        .SiteTitle active {text-decoration:none;}

}


/* -------------------- biggest screen -----------------------------*/
@media screen and (min-width: 1025px) {
        .contentwrapper
        {width:990px;
            margin:0 auto; text-align: left ; border:1px solid blue;}

        #main  {width:100%; text-align: center ;  background:#FFFFFF;margin-bottom:10px}
        .main-content {position:relative; min-height:300px;height:auto !important;height:100%;width:100%;    margin:0 auto; padding:0;   text-align:left;}
        .header {width:100%; margin:0 auto; text-align: left ; margin:0 auto; background:#FFFFFF;}

         .SiteTitle 
         {

                font-family:'Ubuntu';
                line-height: 1.2em;
                float:right;
                color: #006c56;

                font-weight:900;
                font-size: 1.5em;
                padding-top:10px;
                 text-shadow:0px 0px 0 rgb(0,0,0),1px 1px 0 rgb(-34,74,52),2px 2px 0 rgba(0,0,0,0.2), 3px 3px 0 rgb(200,200,200),4px 4px 3px rgba(255,255,255,0),4px 4px 1px rgba(255,255,255,0.5),0px 0px 3px rgba(0,0,0,.2);
         }



        .SiteTitle a {text-decoration:none;}
        .SiteTitle active {text-decoration:none;}

}

I deliberately set the SiteTitle to different color to see the effect.

Then I perform testing to see the result: 1. Desktop: work as expected.

1. 
   

   On Android (720x1280) (4.2.2) . No matter the orientation, the site title is in red.

   
   


2. 
   

   On Ipad (7.0.4). No matter the orientation, the site title is in blue.

   
   

I have refreshed the safari or android browser. But the result is still the same.

What is wrong with my CSS?