Pourquoi la requête média ne fonctionne pas sur mobile?

-1

J'ai utilisé une requête média dans ma page html. Les deux pour les petits écrans et plus de 500px. voici un échantillon.Pourquoi la requête média ne fonctionne pas sur mobile?

.col-1 { width: 58%;} 
 
.col-2 {width: 25%;} 
 
.col-3 {width: 16%;} 
 
.col-4 {width: 100%;} 
 

 

 
@media only screen and (min-width: 480px) { 
 
.col-sm-1 {width: 100%;} 
 
} 
 
    
 
    
 
<body> 
 
<div class="header col-4 col-sm-1"></div> 
 
<div class="aside col-2 col-sm-1"></div> 
 
<div class="main col-1 col-sm-1"></div> 
 
<div class="right-col col-3 col-sm-1"></div> 
 
<div class="footer col-4 col-sm-1">

Quand je remets à la côte la fenêtre du navigateur ci-dessous 480px, tous les divs changer la largeur à 100%. mais je transfère ce fichier sur mon mobile, et lors de l'ouverture du fichier dans le navigateur mobile, la largeur ne change pas à 100%. Cependant le niveau de zoom est bon (bien lisible)

Source

2017-10-02 kashif Riaz

S'il vous plaît mentionner que rappeler la version de tous les cadres que vous utilisez. Tels que bootstrap 3/4. – TidyDev

Je n'utilise pas de cadre. J'utilise le bloc-notes ++ –

Sûrement que vous voulez max-width: 480px si vous voulez seulement la règle à appliquer ci-dessous 480px –

Essayez:

@media only screen and (max-width: 480px) { 
.col-sm-1 {width: 100%;} 
}

Cela applique seulement une largeur de 100% lorsque la l'écran est 480px ou ci-dessous.

Si toujours pas de joie essayez:

@media only screen and (max-width: 480px) { 
    .col-1, 
    .col-2, 
    .col-3 { 
    width: 100%; 
    } 
}

Source

2017-10-02 14:50:28

media only screen and (min-width: 480px) {

a besoin d'être

@media only screen and (min-width: 480px) {

Source

2017-10-02 14:21:24 Alex

désolé, j'ai ajouté @medai dans la page Web, mais j'ai oublié de taper @ –

Pourquoi la requête média ne fonctionne pas sur mobile?

Répondre

Questions connexes