Unable to apply css media query targeting different phones

Question

I am working on a mobile app project and I need to use media query to adjust the top margin so that the icons in the home page centre align to any device also want and adjust the height of the menu so that it suits different mobile phones. I tried using media queries in my css but it does not seem to work.

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>