web-dev-qa-db-fra.com

Écran @média uniquement et (largeur maximale: 479px) ne fonctionne pas pour mobile

J'ai ajouté le code suivant pour responsive. mais pour la version mobile sa couleur d'arrière-plan d'affichage # 000. Il ne doit pas afficher de couleur de fond comme # 111.Avoir de l'aide

@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;
  }
}
htmlcssresponsive-design
11
Shilp

Dans la tête de votre document, assurez-vous que vous avez

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

Si vous l'omettez, de nombreux périphériques redimensionneront la page pour l'adapter à la fenêtre d'affichage.

Bonne chance

35
David Taiaroa

Avez-vous une balise méta viewport spécifiée? Je suggère de changer 479 à 480 aussi.

Voici un exemple de méta-tag de viewport - il s’agit de celui que j’utilise sur mon propre site Web responsive.

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

Balise d'enregistrement

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

Peut-être que vous pouvez spécifier en utilisant

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

parce que si un écran a une largeur de 200 pixels, il respectera toutes les autres règles et ne dépassera pas leur largeur

Passez une bonne journée

0
Matthias Wegtun

Essayez d’utiliser la largeur du périphérique plutôt que la taille de l’écran. De nombreux appareils mobiles/tablettes ouvriront les pages dans un aperçu, la taille de l'écran sera donc ignorée.

De plus, certains appareils mobiles répondront au sélecteur @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*/
0
apaul