@Media min-width e max-width

Ho questa @mediaconfigurazione:

HTML :

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

CSS :

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

Con questa configurazione funziona su iPhone ma non funziona nel browser.

È perché ho già devicenel meta e forse max-width:480pxinvece ho ?

Ho trovato il metodo migliore è scrivere il tuo CSS predefinito per i browser più vecchi, poiché i browser più vecchi, inclusi 5,5, 6, 7 e 8. Non riesco a leggere @media. Quando uso @media lo uso in questo modo:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Ma puoi fare quello che ti piace con il tuo @media, questo è solo un esempio di ciò che ho trovato meglio per me quando ho creato stili per tutti i browser.

Specifiche CSS per iPad.

Anche! Se stai cercando la stampabilità, puoi usarla@media print{}

Il problema di fondo sta usando max-device-widthvs semplicemente vecchio max-width.

L'uso della parola chiave "dispositivo" ha come obiettivo la dimensione fisica dello schermo, non la larghezza della finestra del browser.

Per esempio:

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

Contro

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}

Se il sito Web su dispositivi di piccole dimensioni si comporta come lo schermo del desktop, devi prima inserire questo meta tag nell'intestazione

<meta name="viewport" content="width=device-width, initial-scale=1">

Per le query multimediali è possibile impostare come

questo coprirà tutte le larghezze del tuo cellulare / cellulare

    @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //

    }

Per iPad e iPad pro devi usare

    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    //Put your CSS here for 768px to 1024px width devices(covers all iPad portrait width //

    }

Se si desidera aggiungere CSS per la modalità orizzontale, è possibile aggiungere questo

e (orientamento: paesaggio)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscape) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile landscape width //

        }

Il valore corretto per l' contentattributo dovrebbe includere initial-scaleinvece:

<meta name="viewport" content="width=device-width, initial-scale=1">
                                                   ^^^^^^^^^^^^^^^

per alcuni iPhone devi mettere il tuo viewport in questo modo

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />