La balise <meta> avec l'attribut viewport est utilisée dans le contexte du développement web pour définir les propriétés de l'affichage de la page sur les appareils mobiles. Elle permet de contrôler la largeur de l'écran, l'échelle de zoom et d'autres paramètres liés à la mise en page sur les dispositifs mobiles. Voici comment vous pouvez l'utiliser avec divers exemples :
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple 1</title>
</head>
<body>
<!-- Contenu de la page ici -->
</body>
</html>
Dans cet exemple, la balise <meta> avec l'attribut viewport est utilisée pour spécifier que la largeur de la page doit être égale à la largeur de l'appareil (width=device-width) et l'échelle de zoom initiale doit être de 1 (initial-scale=1.0).
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Exemple 2</title>
</head>
<body>
<!-- Contenu de la page ici -->
</body>
</html>
Dans cet exemple, en plus des paramètres précédents, maximum-scale=1.0 et user-scalable=no sont utilisés pour désactiver la possibilité de zoomer sur la page.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, orientation=landscape">
<title>Exemple 3</title>
</head>
<body>
<!-- Contenu de la page ici -->
</body>
</html>
Cet exemple utilise l'attribut orientation=landscape pour forcer le mode paysage sur les appareils mobiles.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Exemple 4</title>
<style>
body {
overflow-x: hidden; /* Empêche le défilement horizontal automatique */
}
</style>
</head>
<body>
<!-- Contenu de la page ici -->
</body>
</html>
Dans cet exemple, le défilement horizontal automatique est désactivé en utilisant la propriété CSS overflow-x: hidden; dans le style de la page.
Ces exemples montrent comment la balise <meta> avec l'attribut viewport peut être utilisée pour contrôler l'apparence d'une page web sur les appareils mobiles. Vous pouvez ajuster les valeurs en fonction des besoins spécifiques de votre projet.