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.
Antworten:
Sie sind Meta-Tags für Ansichtsfenster und eignen sich am besten für mobile Browser.
Dies bedeutet, dass wir dem Browser mitteilen, dass sich meine Website an Ihre Gerätebreite anpasst.
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 Skalierung definiert den maximalen Zoom. Wenn Sie auf die Website zugreifen, hat die oberste Priorität maximum-scale=1und der Benutzer kann nicht zoomen.
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.
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.
1.0 oder yes?
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.
<!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>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.
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">
Es dient zur Steuerung von Aspekten auf Mobiltelefonen und Tablets. Weitere Informationen finden Sie hier: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Dieser Beitrag kann helfen. https://css-tricks.com/snippets/html/responsive-meta-tag/ Es enthält eine vollständige Beschreibung der Meta-Tags und ihrer verschiedenen Attribute.
<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?