it-swarm.com.de

Was ist das anfängliche Maßstabs-Attribut, das vom Benutzer skalierbar ist, das Minimum-Maßstab und das Maximum-Maßstab-Attribut im Meta-Tag?

Ich ging den Quellcode einer Website durch und fand diesen Code.

<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 Skala, die vom Benutzer skalierbar ist, die minimale Skala und die maximale Skala sind, und was bedeuten diese Werte? Und sag mir auch, welche Werte sie akzeptieren.

59
user3483724

Sie sind Viewport-Meta-Tags und können am besten für mobile Browser verwendet werden.

width = Gerätebreite

Das heißt, wir sagen dem Browser, dass sich meine Website an Ihre Gerätebreite anpasst.

anfangsmaßstab

Dies definiert den Maßstab der Website. Dieser Parameter legt die anfängliche Zoomstufe fest, dh 1 CSS-Pixel ist gleich 1 Viewport-Pixel . Dieser Parameter hilft beim Ändern der Ausrichtung oder beim Verhindern des Standardzooms. Ohne diesen Parameter funktioniert die responsive Site nicht.

maximalwert

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

mindestmaßstab

Minimalskala definiert den minimalen Zoom. Dies funktioniert genauso wie oben, definiert jedoch die minimale Skala. Dies ist nützlich, wenn maximum-scale groß ist und Sie minimum-scale einstellen möchten.

vom Benutzer skalierbar

Vom Benutzer skalierbar zugewiesen 1.0 bedeutet, dass die Website dem Benutzer das Vergrößern oder Verkleinern ermöglicht.

Wenn Sie es jedoch user-scalable=no zuweisen, bedeutet dies, dass die Website dem Benutzer nicht erlaubt, zu vergrößern oder zu verkleinern.

95
Jay Patel

vom Benutzer skalierbar: 

user-scalable = yes (Standardeinstellung), damit der Benutzer die Webseite vergrößern oder verkleinern kann; 

user-scalable = no, 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>

17
xgqfrms

viewport Meta-Tag im mobilen Browser, 

Die Eigenschaft Anfangskalierung steuert die Zoomstufe beim ersten Laden der Seite. Die Eigenschaften Maximum Scale , Minimum Scale und die vom Benutzer skalierbaren Eigenschaften steuern, wie Benutzer die Seite vergrößern oder verkleinern dürfen.

7
Wundwin Born

Dieses Meta-Tag wird von allen responsiven Webseiten verwendet, d. H. Von denen, die so konzipiert sind, dass sie für verschiedene Gerätetypen geeignet sind - Telefon, Tablet und Desktop. Die Attribute tun, was sie sagen. Wie in den MDN Mit dem Viewport-Meta-Tag zur Steuerung des Layouts in mobilen Browsern wird jedoch Folgendes angegeben:

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

Ich habe festgestellt, dass das Folgende sicherstellt, dass die Seite standardmäßig mit null Zoom angezeigt wird.

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

0
Ron Royston

Es ist für die Kontrolle von Aspekten auf Mobiltelefonen und Tablets. Weitere Informationen finden Sie hier: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

0