web-dev-qa-db-fra.com

Div Afficher / masquer la requête multimédia

Quel code puis-je utiliser pour faire apparaître une div en particulier uniquement sur une largeur de mobile?

J'ai une div à 100% de largeur complète en haut de mon écran, je voudrais qu'elle s'affiche uniquement lorsque le périphérique est spécifié en tant que largeur mobile.

34
Francesca

Je ne suis pas sûr de ce que vous entendez par "largeur mobile". Mais dans chaque cas, le CSS @media peut être utilisé pour masquer des éléments dans la base de la largeur de l'écran. Voir des exemples:

<div id="my-content"></div>

...et:

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-content { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 1024px) {
  #my-content { display: none; }   /* hide it elsewhere */
}

Une détection vraiment mobile est une sorte de programmation difficile et plutôt difficile. Finalement, voir le: http://detectmobilebrowsers.com/ ou d’autres sources similaires.

82
Martin Poljak

Il semble que vous souhaitiez peut-être accéder à la fenêtre d'affichage de l'appareil. Vous pouvez le faire en insérant cette balise META dans votre en-tête.

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

http://www.w3schools.com/css/css_rwd_viewport.asp

0
Joe Neuman