无法应用针对不同手机的css媒体查询

Question

我正在开发移动应用项目，我需要使用媒体查询来调整上边距，以便主页中心的图标与任何设备对齐，并调整菜单的高度，使其适合不同的手机。我尝试在我的CSS中使用媒体查询，但似乎没有用。

CSS ：

/* iPhone 4 retina portrait */
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {
    #maintable {margin-top: 9%;}
    #mypanel {
        top: -365px !important;
    }
}


@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){

    #maintable {
        margin-top: 50%;
    }
    #mypanel {
        top: -465px !important;
    }
}

HTML

<div data-role="footer" id="divfooter" data-position="fixed" data-tap-toggle="false" data-id="menu">
            <div data-role="navbar">
                <ul>
                    <div id="slidebottom" class="slide" style="font-size: 11px;">
                        <div class="inner displaynone" id="mypanel" data-role="panel" style=" top: -453px; width: 252%; margin-bottom: 6px;" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">
                            <ul>
                                <li style="width: 100%;" class="menu2styling"><a href="#" onclick="LoadVideo();" style="text-align: left;"><img src="css/img/menuicon/video.png" alt="/" class="menuicon"> <span class="">Videos</span></a> </li>
                                <li style="width: 100%;" class="menu2styling"><a href="#" onclick="LoadManual();" style="text-align: left;"><img src="css/img/menuicon/manuals.png" alt="/" class="menuicon"><span class="">Manuals</span></a></li>
                                <li style="width: 100%;" class="menu2styling"><a href="Alarm.html" onclick="LoadAlarm();" style="text-align: left;"><img src="css/img/menuicon/alarm.png" alt="/" class="menuicon"><span class="">Alarm Help</span></a></li>
                                <li style="width: 100%;" class="menu2styling"><a href="#" style="text-align: left;"><img src="css/img/menuicon/ecto.png" alt="/" class="menuicon"><span class="">ECTO Help</span></a></li>
                                <li style="width: 100%;" class="menu2styling"><a href="#" style="text-align: left;"><img src="css/img/menuicon/faq.png" alt="/" class="menuicon"><span class="">FAQ's</span></a></li>
                                <li style="width: 100%; border: none;" class="menu2styling"><a href="#" style="text-align: left;"><img src="css/img/menuicon/help.png" alt="/" class="menuicon"><span class="">Help</span></a></li>
                            </ul>
                        </div>
                        <li><a href="#popupPanel" data-rel="popup" data-transition="slide" data-role="button" style="border-left: 1px solid #a31344;">
                            <img id="menuLogo" src="css/img/menu.png" /></a></li>
                    </div>
                    <li><a href="#" onclick="LoadHome();" id="manualLI" style="border-left: 1px solid #a31344;">
                        <img src="css/img/home.png" /></a></li>
                    <li><a href="#" onclick=#" id="alarmLI" style="border-left: 1px solid #a31344;">
                        <img src="css/img/switch_1.png" /></a></li>
                </ul>
            </div>
        </div>