Android Media查询未按预期工作

Question

我有以下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;
    }
}

我故意将SiteTitle设置为不同颜色以查看效果。

然后我执行测试以查看结果： 1.桌面：按预期工作。

1. 在Android（720x1280）（4.2.2）上。无论方向如何，网站标题均为红色。

2. 在Ipad（7.0.4）上。无论方向如何，网站标题均为蓝色。

我刷新了safari或android浏览器。但结果仍然相同。

我的CSS有什么问题？