@media solo schermo e (max-larghezza: 479px) non funziona per il cellulare

Ho aggiunto il seguente codice per la risposta. ma per la versione mobile mostra il colore di sfondo # 000. Deve non mostra il colore di sfondo come # 111.Please aiuto@media solo schermo e (max-larghezza: 479px) non funziona per il cellulare

@media only screen and (max-width: 1024px) { 
body{ 
    background-color:#ff0000; 
    } 
} 

@media only screen and (max-width: 767px) 
{ 
body{ 
    background-color:#000; 
    } 
} 

@media only screen and (max-width: 479px) 
{ 
body{ 
    background-color:#111; 
    } 
}

fonte

2013-04-02 Shilp

Avete una finestra meta tag specificato? Suggerirei di cambiare anche 479 a 480. –

Sì, mi sono perso per specificare il meta tag della porta di visualizzazione. Lo ha aggiunto e funziona bene. – Shilp

Fantastico, lo aggiungo come risposta e se riesci ad accettarlo quando sei in grado, sarebbe fantastico. –

Nella testa del documento, assicurarsi di avere

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

Se si omette questo, allora molti dispositivi ridimensionare la pagina alle dimensioni della finestra.

Buona fortuna

fonte

2013-04-02 15:40:56

Funziona !! Grazie David. – Shilp

È grandioso, sono contento che tu l'abbia risolto –

Nozioni di base che le persone come me tendono a dimenticare, grazie! – Pavitar

Forse si può specifiy utilizzando

@media only screen and (min-width:768px) and (max-width: 1024px) {}

perché se uno schermo è 200px in larghezza si sarebbe conformata a tutte le altre regole E ' non superiore a loro larghezza

hanno un grande giorno

fonte

2013-04-02 14:00:37

Provare a utilizzare la larghezza del dispositivo e non solo delle dimensioni dello schermo. Molti dispositivi mobili/tablet apriranno le pagine in una panoramica, quindi le dimensioni dello schermo saranno ignorate.

Anche alcuni dispositivi mobili risponderanno al selettore @media handheld.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
/*Ipad*/ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
/* Smartphones (portrait and landscape)*/ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) 
/*Iphone 4*/ 
@media only screen and (min-device-pixel-ratio : 1.5) 
/*Iphone 4*/ 

@media handheld and (max-width: 960px) 
/*handheld*/

fonte

2013-04-02 14:18:49 apaul

-1

Perché non utilizzare Twitter Bootstrap? http://twitter.github.com/bootstrap/

fonte

2013-04-02 14:22:07

Sono con te. Bootstrap o alcuni altri buoni framework come Foundation possono risparmiare un sacco di tempo e sono ancora abbastanza flessibili da poter personalizzare il design come preferisci. –

Avete un meta tag viewport specificato? Suggerirei di cambiare anche 479 a 480.

Ecco un esempio di un meta tag viewport: è quello che utilizzo sul mio sito Web reattivo.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

fonte

2013-04-03 09:09:55

+1 per suggerire la larghezza opt. –

Arrivo tag

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

fonte

2018-01-17 07:42:50

@media solo schermo e (max-larghezza: 479px) non funziona per il cellulare

risposta

Problemi correlati