Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

device-width

Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.

Note : Pour interroger la largeur de la zone d'affichage, il faut utiliser la caractéristique média width.

La caractéristique média CSS device-width est utilisée pour tester la largeur de la surface de rendu d'un périphérique de sortie.

Syntaxe

device-width est définie comme une longueur (type <length>). C'est une caractéristique d'intervalle et les variantes préfixées min-device-width et max-device-width peuvent être utilisées pour manipuler un minimum ou un maximum.

Exemples

Appliquer une feuille de style spécifique pour les appareils dont la largeur est inférieure à 800 pixels

html
<link
  rel="stylesheet"
  media="screen and (max-device-width: 799px)"
  href="http://toto.truc.com/narrow-styles.css" />

Spécifications

Specification
Media Queries Level 4
# device-width

Compatibilité des navigateurs

Voir aussi