web-dev-qa-db-fra.com

Qu'est-ce qu'un attribut scale, scalable par l'utilisateur, scale-minimum, maximum-scale dans une balise méta?

Je parcourais le code source d'un site Web et j'ai trouvé ce morceau de code.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">

Je veux savoir en quoi consistent cette échelle initiale, évolutive par l'utilisateur, minimale et maximale, et que signifient ces valeurs Et dites-moi aussi quelles sont les valeurs qu’ils acceptent.

html5attributestagsviewportmeta-tags
59
user3483724

Ce sont des balises méta de fenêtre et sont plus applicables sur les navigateurs mobiles.

largeur = largeur-appareil

Cela signifie que nous disons au navigateur "mon site Web s'adapte à la largeur de votre appareil".

échelle initiale

Ceci définit l'échelle du site Web. Ce paramètre définit le niveau de zoom initial, ce qui signifie que 1 pixel CSS est égal à 1 pixel de visualisation. Ce paramètre aide lorsque vous modifiez l'orientation ou empêchez le zoom par défaut. Sans ce paramètre, le site responsive ne fonctionnera pas.

échelle maximale

Échelle maximale définit le zoom maximal. Lorsque vous accédez au site Web, la priorité absolue est maximum-scale=1. Elle ne permet pas à l'utilisateur d'effectuer un zoom. 

échelle minimale

Minimum-scale définit le zoom minimum. Cela fonctionne comme ci-dessus, mais définit l’échelle minimale. Ceci est utile lorsque maximum-scale est grand et que vous souhaitez définir minimum-scale.

évolutif

Le caractère évolutif attribué à 1.0 signifie que le site Web permet à l'utilisateur d'effectuer un zoom avant ou arrière.

Mais si vous l'assignez à user-scalable=no, cela signifie que le site Web ne permet pas à l'utilisateur d'effectuer un zoom avant ou arrière.

95
Jay Patel

user-scalable: 

user-scalable = yes (par défaut) pour permettre à l'utilisateur d'effectuer un zoom avant ou arrière sur la page Web; 

user-scalable = no pour empêcher l'utilisateur d'effectuer un zoom avant ou arrière.

Vous pouvez obtenir des informations plus détaillées en lisant les articles suivants.

Code de démonstration (recommandé)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
</head>
<body>
    <header>
    </header>
    <main>
        <section>
            <h1>do not using <mark>user-scalable=no</mark></h1>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

17
xgqfrms

balise méta viewport sur le navigateur mobile, 

La propriété initial-scale contrôle le niveau de zoom lors du premier chargement de la page. Les propriétés maximum-scale , minimum-scale , et les propriétés évolutives de l'utilisateur contrôlent la manière dont les utilisateurs sont autorisés à agrandir ou réduire la page.

7
Wundwin Born

Cette balise méta est utilisée par toutes les pages Web responsive, c’est-à-dire celles qui sont conçues pour être bien agencées sur tous les types de périphériques - téléphone, tablette et bureau. Les attributs font ce qu'ils disent. Cependant, en tant que MDN Utiliser la balise méta de la fenêtre d'affichage pour contrôler la mise en page sur les navigateurs mobiles indique,

Sur les écrans à haute résolution, les pages avec initial-scale=1 seront effectivement zoomé par les navigateurs.

J'ai constaté que ce qui suit garantit que la page s'affiche avec un zoom nul par défaut.

<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">

0
Ron Royston

C'est pour contrôler l'aspect sur les téléphones mobiles et les tablettes. Vous trouverez plus d'informations ici: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

0
Samuel De Backer