media query

[phpdevelopment]

Buenos días

No soy un experto en css y tengo problemas con un html para distintos dispositivos.

Alguien me podría decir cuales serían las media query para correcta para los siguientes dispositivos.

ANDROID 4.4.4
ANDROID 5.1.0
ANDROID GMAIL6
IPHONE 5s
IPHONE 4

Y donde puedo testear mi html para dichos dispositivos, ¿alguna web o hay que añadir cada dispositivo en chrome?, añadi el Android 4.4.4 pero no lo pilla bien.

Muchas gracias
Saludos

[mpozo]

Estás mezclando sistemas operativos con dispositivos https://david-smith.org/iosversionstats/ aunque eso no es importante para el tema que ocupa. Las media query son[QUOTE]Una*media query*consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. [\QUOTE]
https://developer.mozilla.org/es/docs/CSS/Media_queries

[phpdevelopment]

Muchas gracias,

Pero no se cual es el problema que tengo con los css para que en Android 5.1.1 ( no ocupa el 100%) y Android 4.4 , la parte de Meet Point no se vea correctamente,no sale centrado.

Código HTML:

    <style type="text/css">
 

        body {
            padding: 0;
            margin: 0;
        }

        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }
       
        body,
        td {
            font-family: 'Andada', serif;
            margin-bottom: -1px;
        }


     

        .ExternalClass {
            width: 100%;
        }
      

        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
            line-height: 100%;
        }
     

        p {
            margin-bottom: 16px
        }

        img {
            border: none;
            display: block;
        }


        * [lang~="gmail"] img {
            border: none;
            display: block;
            color: #333333;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 10px;
        }
        /* enables cellpadding in gmail */

        * [lang~="gmail"] table td {
            border-collapse: separate;
        }

        .defaultBG {
            background-color: #ffffff;
        }

        .defaultBGWH {
            background-color: #ffffff;
        }
        /* Mobile styling starts here */

        @media only screen and (max-width: 599px) {
            html {
                -webkit-text-size-adjust: none;
            }
            table[class*="wrapper"] {
                width: 100%;
                padding-left: 3%;
                padding-right: 3%;
            }

            .meeting{font-size: 18px !important;}

            .dateMonth, .dateYear{
                font-size: 10px !important;
                margin-top: 9px !important;
            }

            table[class*="wrapperFull"] {
                width: 100%;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            table[class*="wrapper"] .fl,
            table[class*="wrapperFull"] .fl {
                width: 100%;
                float: left;
                height: auto;
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-top:-1px;

            }
            table[class*="wrapper"] .txt,
            table[class*="wrapperFull"] .txt {
                width: 90%;
                padding-left: 5%;
                padding-right: 5%;
                text-align: center;
            }
            table[class*="wrapper"] .centered,
            table[class*="wrapperFull"] .centered {
                text-align: center;
            }
            table[class*="wrapper"] .mob_none,
            table[class*="wrapperFull"] .mob_none {
                display: none !important;
            }
            table[class*="wrapper"] .h20,
            table[class*="wrapperFull"] .h20 {
                line-height: 20px !important;
            }
            table[class*="wrapper"] .full_img img,
            table[class*="wrapperFull"] .full_img img {
                width: 100%;
                height: auto;
            }
            table[class*="wrapper"] .max_img img,
            table[class*="wrapperFull"] .max_img img {
                max-width: 100%;
                height: auto;
                margin: 0 auto;
            }
            table[class*="wrapper"] .button,
            table[class*="wrapperFull"] .button {
                padding: 0 !important;
                text-align: center;
                width: 80%;
            }
            table[class*="wrapper"] .button a,
            table[class*="wrapperFull"] .button a {
                padding: 20px 10px;
            }
            table[class*="wrapper"] .center,
            table[class*="wrapperFull"] .center {
                text-align: center;
                padding-left:15px !important;
                padding-right:15px !important;
                box-sizing: border-box;
            }
            table[class*="wrapper"] .center img,
            table[class*="wrapperFull"] .center img {
                display: block;
                margin: auto;
            }
            table[class*="wrapper"] .button td,
            table[class*="wrapperFull"] .button td {
                padding: 0 !important;
                /* background-color: transparent !important;*/
            }
            table[class*="wrapper"] .button td a,
            table[class*="wrapperFull"] .button td a {
                display: block;
                padding: 15px;
                background-color: #e99a01;
                max-width: 50%;
                margin: 0 auto 10px;
                border-radius: 25px;
            }
            table[class*="wrapper"] .button2 td a,
            table[class*="wrapperFull"] .button2 td a {
                display: block;
                background-color: #ffffff;
                width: 100%;
            }
            table[class*="wrapper"] .header_button .button td a {
                background-color: #ffffff;
            }
            table[class*="wrapper"] .logo img {
                width: 250px !important;
                height: auto;
            }
            table[class*="wrapper"] .date a {
                color: #ffffff !important;
                text-decoration: none !important;
            }
            table[class*="news"] .button {
                width: 100%;
            }
            table[class*="news"] .button td a {
                display: block;
                padding: 15px;
                background-color: #e99a01;
                margin: 0 auto 10px;
            }
            table[class*="wrapper"] .paddingTop {
                padding-top: 10px;
            }
            table[class*="news"] .share {
                margin: auto;
                float: none;
            }
            table[class*="news"] .logo img {
                width: 200px !important;
                display: block;
                float: none;
                margin: auto;
            }
            table[class*="footer"] .social {
                margin: auto;
                float: none;
            }
            table[class*="wrapper"] .hero_title {
                width: 90% !important;
                padding-left: 5% !important;
                padding-right: 5% !important;
            }
            .centerMobile{
                text-align: center !important;
                width: 100% !important;
            }
            .line_gif{
                max-width: 92%;
            }
            .footer, .footer table{
                width: 100% !important;
            }
            .footer table{ background-color:#fff;
            }

            @media screen and (device-aspect-ratio: 40/71) {
                body{min-width:320px !important;}
            }
            @media only screen and (max-width: 240px)
            table[class*="wrapper"] {
                width: 100%;
                padding-left: 3%;
                padding-right: 3%;
            }
              
                @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3)
                table[class*="wrapper"] {
                    width: 100%;
                    padding-left: 3%;
                    padding-right: 3%;
                }

                    @media only screen
                    and (min-device-width : 320px)
                    and (max-device-width : 568px) {
                        .socialButton{width: 35px;}
                        .socialButtonTwo{width: 55px;}
                    }
    </style>


<style>
    table[class="wrapper"] .fonts{
        font-family: 'Andada', serif !important;
        font-family: 'BioRhyme', serif !important;
        font-family: 'Montserrat', sans-serif !important;
    }
</style>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="table-layout:fixed; background-color:#ffffff;" amf:bgcolor="" amf:container="preheader" class="defaultBG">
    <tbody>
    <tr>
        <td align="center">
            <!--Wrapper: Start -->
            <table cellpadding="0" cellspacing="0" border="0" width="600" class="wrapper">
                <tbody>
                <tr>
                    <td class="fl centered" style="padding:5px 0 0 0;">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                            <tr class="mob_none">
                                <td align="center" class="fl" style="color:#000000; font-size:11px; font-weight: 400; font-family: 'BioRhyme', serif; letter-spacing:1px;">
                                    <a href="[*link.webversion_url*]" style="color:#000000;text-decoration: none;">If you cannot view this email, please click here</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table> 

Muchas gracias
Saludos