Was ist das Attribut für die anfängliche Skalierung, die Benutzerskalierbarkeit, die minimale Skalierung und die maximale Skalierung im Meta-Tag?

78

Ich habe den Quellcode einer Website durchgesehen und diesen Code gefunden.

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

Ich möchte wissen, was diese anfängliche Skalierung, benutzerskalierbar, minimale Skalierung, maximale Skalierung sind und was diese Werte bedeuten. Und sag mir auch, welche Werte sie akzeptieren.

html attributes tags viewport meta-tags Jay Patel
quelle

Antworten:

127

Sie sind Meta-Tags für Ansichtsfenster und eignen sich am besten für mobile Browser.

width = Gerätebreite

Dies bedeutet, dass wir dem Browser mitteilen, dass sich meine Website an Ihre Gerätebreite anpasst.

Anfangsskala

Dies definiert den Maßstab der Website. Dieser Parameter legt die anfängliche Zoomstufe fest, dh 1 CSS-Pixel entspricht 1 Ansichtsfensterpixel . Dieser Parameter hilft, wenn Sie die Ausrichtung ändern oder das Standardzoom verhindern. Ohne diesen Parameter funktioniert die responsive Site nicht.

maximale Skala

Maximale Skalierung definiert den maximalen Zoom. Wenn Sie auf die Website zugreifen, hat die oberste Priorität maximum-scale=1und der Benutzer kann nicht zoomen.

Mindestmaßstab

Minimale Skalierung definiert den minimalen Zoom. Dies funktioniert genauso wie oben, definiert jedoch die Mindestskala. Dies ist nützlich, wenn maximum-scalees groß ist und Sie festlegen möchten minimum-scale.

vom Benutzer skalierbar

Die Benutzerskalierbarkeit von 1.0 bedeutet, dass die Website dem Benutzer das Vergrößern oder Verkleinern ermöglicht.

Wenn Sie es jedoch zuweisen user-scalable=no, bedeutet dies, dass der Benutzer auf der Website nicht vergrößern oder verkleinern kann.

Jay Patel
quelle
4
<meta name="viewport" content="width= 640,initial-scale=0.7,minimum-scale=1.0,maximum-scale=1.0" />kannst du das erklären Glaubst du, es ist gültig?
Durai Amuthan.H
Ist Ansichtsfenster Pixel gleiche wie Gerätepixel ?
Überaustausch
1
Benutzerskalierbar sollte sein 1.0 oder yes?
Kazim Zaidi
@overexchange Nr.
TylerH
2
Bei einer mobilen Safari deaktiviert die maximale Skalierung den Benutzerzoom nicht. Das automatische Zoomen wird nur deaktiviert, wenn Sie auf eine Texteingabe tippen.
Curtis
20

Benutzerskalierbar:

Benutzerskalierbar = Ja (Standard), damit der Benutzer die Webseite vergrößern oder verkleinern kann;

Benutzerskalierbar = Nein , um zu verhindern, dass der Benutzer hinein- oder herauszoomt.

Weitere Informationen erhalten Sie in den folgenden Artikeln.

Demo-Code (empfohlen)

<!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>
Erweitern Sie das Snippet

xgqfrms
quelle
<h1> verwenden Sie nicht <mark>user-scalable=no </ mark> </ h1>
xgqfrms
Vielen Dank, endlich jemand, der genau erklärt hat, was Min / Max-Skalen tun.
Jfeferman
7

viewport Meta-Tag im mobilen Browser,

Die Eigenschaft für die anfängliche Skalierung steuert die Zoomstufe beim ersten Laden der Seite. Die Eigenschaften für maximale Skalierung , minimale Skalierung und Benutzerskalierbarkeit steuern, wie Benutzer die Seite vergrößern oder verkleinern dürfen.

Wundwin geboren
quelle
1

Dieses Meta-Tag wird von allen reaktionsschnellen Webseiten verwendet, dh von solchen, die für ein gutes Layout für alle Gerätetypen ausgelegt sind - Telefon, Tablet und Desktop. Die Attribute tun, was sie sagen. Wie MDNs Verwenden des Viewport-Meta-Tags zur Steuerung des Layouts in mobilen Browsern jedoch anzeigt,

Auf Bildschirmen mit hoher Auflösung werden Seiten mit initial-scale=1effektiv von Browsern gezoomt.

Ich habe festgestellt, dass Folgendes sicherstellt, dass die Seite standardmäßig ohne Zoom angezeigt wird.

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

Ronnie Royston
quelle