Wenn man Webseiten für mobile Geräte umstrukturiert oder entwickelt, muss man zuerst den Viewport auf mobilen Geräten klar verstehen. Nur wenn man das Konzept des Viewports versteht und die Verwendung des viewport-bezogenen Meta-Tags klärt, kann man sich besser an mobile Geräte mit verschiedenen Auflösungen anpassen oder auf sie reagieren.

I. Das Konzept des Viewports

Einfach ausgedrückt ist der Viewport auf einem mobilen Gerät der Bereich auf dem Gerätebildschirm, der zum Anzeigen unserer Webseite verwendet werden kann. Genauer gesagt ist es der Teil des Browsers (oder einer Webview in einer App), der zum Anzeigen der Webseite verwendet wird. Der Viewport ist jedoch nicht auf die Größe des sichtbaren Bereichs des Browsers beschränkt; er kann größer oder kleiner als der sichtbare Bereich des Browsers sein. Standardmäßig ist der Viewport auf einem mobilen Gerät im Allgemeinen größer als der sichtbare Bereich des Browsers. Das liegt daran, dass die Auflösung mobiler Geräte im Vergleich zu Desktop-Computern relativ gering ist. Damit traditionelle, für Desktop-Browser entworfene Websites auf mobilen Geräten ordnungsgemäß angezeigt werden können, setzen Browser auf mobilen Geräten ihren Standard-Viewport daher auf 980px oder 1024px (oder andere Werte, die vom Gerät selbst bestimmt werden). Die Folge ist jedoch, dass der Browser eine horizontale Bildlaufleiste erhält, da die Breite des sichtbaren Bereichs des Browsers kleiner ist als die Breite dieses Standard-Viewports. Die folgende Abbildung listet die Standard-Viewport-Breiten von Browsern auf einigen Geräten auf.

II. 1px in CSS ist nicht gleich 1px des Geräts

In CSS verwenden wir im Allgemeinen px als Einheit. In Desktop-Browsern entspricht 1 CSS-Pixel oft 1 physischen Pixel auf dem Computerbildschirm. Dies kann die Illusion erzeugen, dass Pixel in CSS die physischen Pixel des Geräts sind. In Wirklichkeit ist das jedoch nicht der Fall. Pixel in CSS sind nur eine abstrakte Einheit. Auf verschiedenen Geräten oder in verschiedenen Umgebungen sind die physischen Gerätepixel, die durch 1px in CSS dargestellt werden, unterschiedlich. Bei Webseiten, die für Desktop-Browser entworfen wurden, müssen wir uns darüber keine Gedanken machen, aber auf mobilen Geräten müssen wir diesen Punkt verstehen. Bei früheren mobilen Geräten war die Bildschirm-Pixeldichte relativ niedrig, wie beim iPhone 3, dessen Auflösung 320x480 betrug. Auf dem iPhone 3 war ein CSS-Pixel tatsächlich gleich einem physischen Bildschirmpixel. Später, mit der technologischen Entwicklung, wurde die Bildschirm-Pixeldichte mobiler Geräte immer höher. Ab dem iPhone 4 führte Apple den sogenannten Retina-Bildschirm ein, dessen Auflösung sich auf 640x960 verdoppelte, aber die Bildschirmgröße blieb unverändert. Das bedeutet, dass es auf einem gleich großen Bildschirm doppelt so viele Pixel gibt. Zu diesem Zeitpunkt entspricht ein CSS-Pixel zwei physischen Pixeln. Dasselbe gilt für mobile Geräte anderer Marken. Zum Beispiel können Android-Geräte je nach Bildschirm-Pixeldichte in verschiedene Stufen wie ldpi, mdpi, hdpi, xhdpi eingeteilt werden, und die Auflösungen sind ebenfalls vielfältig. Wie viele physische Bildschirmpixel ein CSS-Pixel auf einem Android-Gerät entspricht, variiert ebenfalls von Gerät zu Gerät, und es gibt keine eindeutige Antwort.

Ein weiterer Faktor, der ebenfalls Änderungen an px in CSS verursacht, ist die Benutzerskalierung. Wenn der Benutzer die Seite beispielsweise um 100 % vergrößert, verdoppeln sich auch die physischen Pixel, die durch 1px in CSS dargestellt werden; wenn die Seite um die Hälfte verkleinert wird, halbieren sich umgekehrt auch die physischen Pixel, die durch 1px in CSS dargestellt werden. Auf diesen Punkt wird später im Artikel eingegangen.

In mobilen Browsern und einigen Desktop-Browsern besitzt das window-Objekt eine Eigenschaft devicePixelRatio. Die offizielle Definition lautet: das Verhältnis von physischen Pixeln des Geräts zu geräteunabhängigen Pixeln, d. h. devicePixelRatio = physische Pixel / unabhängige Pixel. Das px in CSS kann als geräteunabhängiges Pixel betrachtet werden, sodass wir durch devicePixelRatio wissen können, wie viele physische Pixel ein CSS-Pixel auf diesem Gerät darstellt. Zum Beispiel beträgt auf einem iPhone mit Retina-Display der Wert von devicePixelRatio 2, was bedeutet, dass 1 CSS-Pixel 2 physischen Pixeln entspricht. Es ist jedoch zu beachten, dass devicePixelRatio in verschiedenen Browsern noch einige Kompatibilitätsprobleme aufweist, sodass wir uns vorerst nicht vollständig darauf verlassen können. Für konkrete Situationen kannst du einen Blick werfen aufdiesen Artikel。

Testergebnisse zu devicePixelRatio:

III. PPKs Theorie über drei Viewports

Der große ppkhat viel zum Viewport auf mobilen Geräten geforscht (Erster Artikel，Zweiter Artikel，Dritter Artikel), Interessierte können einen Blick hineinwerfen. Viele der Daten und Standpunkte in diesem Artikel stammen ebenfalls von dort. ppk ist der Ansicht, dass es auf mobilen Geräten drei Viewports gibt.

Zunächst einmal denkt der Browser auf einem mobilen Gerät, er müsse allen Websites erlauben, normal angezeigt zu werden, sogar solchen, die nicht für mobile Geräte entworfen wurden. Aber wenn der sichtbare Bereich des Browsers als Viewport verwendet wird, werden Websites, die für Desktop-Browser entworfen wurden, bei der Anzeige auf mobilen Geräten zwangsläufig zusammengequetscht, weil die Bildschirme mobiler Geräte nicht sehr breit sind und der Viewport zu schmal ist, und sogar das Layout kann durcheinandergeraten. Vielleicht fragt sich jemand: Gibt es heutzutage nicht viele Telefone mit sehr großen Auflösungen, wie 768x1024 oder 1080x1920? Solche Telefone sollten Websites, die für Desktop-Browser entworfen wurden, problemlos anzeigen können, oder? Wie wir bereits sagten, repräsentiert 1px in CSS nicht 1px auf dem Bildschirm. Je größer deine Auflösung, desto mehr physische Pixel repräsentiert 1px in CSS, und desto größer ist der Wert von devicePixelRatio. Das ist leicht zu verstehen, denn deine Auflösung ist gestiegen, aber die Bildschirmgröße ist nicht viel größer geworden. Du musst 1px in CSS mehr physische Pixel repräsentieren lassen, damit die Größe eines 1px-Objekts auf dem Bildschirm ähnlich ist wie auf Geräten mit niedriger Auflösung; andernfalls ist es zu klein, um es klar zu sehen. Auf einem Gerät wie 1080x1920 musst du standardmäßig möglicherweise nur die Breite eines div auf etwas über 300px setzen (abhängig vom Wert von devicePixelRatio), um die volle Bildschirmbreite zu erhalten. Zurück zum Thema: Wenn der sichtbare Bereich des Browsers auf einem mobilen Gerät als Viewport festgelegt wird, werden einige Websites falsch angezeigt, weil der Viewport zu schmal ist. Daher entscheiden sich diese Browser, den Viewport standardmäßig auf einen breiteren Wert festzulegen, wie 980px, damit auch für Desktop entworfene Websites auf mobilen Browsern normal angezeigt werden können. ppk nennt diesen Browser-Standard-Viewport den Layout-Viewport. Die Breite dieses Layout-Viewports kann über document.documentElement.clientWidth ermittelt werden.

Allerdings ist die Breite des Layout-Viewports größer als die Breite des sichtbaren Bereichs des Browsers, daher benötigen wir auch einen Viewport, der die Größe des sichtbaren Bereichs des Browsers repräsentiert. ppk nennt diesen Viewport den visuellen Viewport. Die Breite des visuellen Viewports kann über window.innerWidth ermittelt werden, aber in Android 2, Opera Mini und UC 8 kann sie nicht korrekt ermittelt werden.

Jetzt haben wir bereits zwei Viewports: Layout-Viewport und visuellen Viewport. Aber der Browser findet, dass es nicht genug ist, weil immer mehr Websites speziell für mobile Geräte gestaltet werden, also muss es auch einen Viewport geben, der sich perfekt an mobile Geräte anpassen kann. Sogenannte perfekte Anpassung bedeutet: Erstens kann man ohne Benutzer-Zoom oder horizontales Scrollen alle Inhalte der Website normal ansehen; zweitens ist die angezeigte Textgröße angemessen. Zum Beispiel ist ein Absatz mit 14px Text auf einem Bildschirm mit hoher Pixeldichte nicht zu klein, um klar gelesen zu werden. Idealerweise sollte die Größe dieses 14px-Texts unabhängig von Bildschirmdichte oder Auflösung ungefähr gleich sein. Natürlich gilt dasselbe Prinzip nicht nur für Text, sondern auch für andere Elemente wie Bilder. ppk nennt diesen Viewport den idealen Viewport, den dritten Viewport - den idealen Viewport mobiler Geräte.

Der ideale Viewport hat keine feste Größe; verschiedene Geräte haben unterschiedliche ideale Viewports. Alle iPhones haben eine ideale Viewport-Breite von 320px, egal ob ihre Bildschirmbreite 320 oder 640 beträgt. Das heißt, auf dem iPhone repräsentieren 320px in CSS die Breite des iPhone-Bildschirms.

Aber Android-Geräte sind komplizierter. Es gibt 320px, 360px, 384px und so weiter. Was die ideale Viewport-Breite verschiedener Geräte betrifft, kannst du aufhttp://viewportsizes.comeinen Blick werfen; dort werden die idealen Breiten vieler Geräte gesammelt.

Um es noch einmal zusammenzufassen:ppk unterteilt den Viewport auf Mobilgeräten in drei Typen: Layout-Viewport, visueller Viewport und idealer Viewport. Unter ihnen ist der ideale Viewport der am besten geeignete Viewport für Mobilgeräte. Die Breite des idealen Viewports entspricht der Bildschirmbreite des Mobilgeräts. Solange man die Breite eines Elements in CSS auf die Breite des idealen Viewports (in px) setzt, entspricht die Breite des Elements der Bildschirmbreite des Geräts, also dem Effekt einer 100%-Breite. Die Bedeutung des idealen Viewports besteht darin, dass Websites, die für den idealen Viewport entworfen wurden, unabhängig von der Auflösung des Bildschirms perfekt für Benutzer dargestellt werden können, ohne dass manuelles Zoomen oder horizontale Bildlaufleisten erforderlich sind.

IV. Verwenden des Meta-Tags zur Steuerung des Viewports

Der Standard-Viewport auf Mobilgeräten ist der Layout-Viewport, der breiter als der Bildschirm ist. Wenn wir jedoch Websites für Mobilgeräte entwickeln, benötigen wir den idealen Viewport. Wie erhalten wir also den idealen Viewport? Hier kommt das Meta-Tag ins Spiel.

Bei der Entwicklung mobiler Websites besteht eine der häufigsten Aktionen darin, Folgendes in unseren head-Tag zu kopieren:

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

Dieses Meta-Tag setzt die aktuelle Viewport-Breite auf die Gerätebreite und verhindert außerdem, dass der Benutzer manuell zoomt. Bei verschiedenen Websites können die Anforderungen daran, ob Zoomen erlaubt ist, unterschiedlich sein, aber die Viewport-Breite auf die Gerätebreite zu setzen, ist wahrscheinlich ein Effekt, den jeder möchte. Wenn man es nicht so einstellt, wird der Standard-Viewport verwendet, der breiter als der Bildschirm ist, was bedeutet, dass eine horizontale Bildlaufleiste erscheint.

Was genau enthält dieses Meta-Tag mit name="viewport", und welche Funktion haben die einzelnen Teile davon?

Das Meta-Viewport-Tag wurde zuerst von Apple in seinem Safari-Browser eingeführt, um das Viewport-Problem auf Mobilgeräten zu lösen. Später folgten Android und die großen Browserhersteller und fügten Unterstützung für Meta-Viewport hinzu, und es hat sich als sehr nützlich erwiesen.

In Apples Spezifikation hat meta viewport 6 Attribute (nennen wir die Dinge in content vorerst Attribute und Werte), wie folgt:

Diese Attribute können gleichzeitig, einzeln oder in Kombination verwendet werden. Wenn mehrere Attribute gleichzeitig verwendet werden, trennen Sie sie einfach durch Kommas.

Außerdem unterstützt Android auch die private Eigenschaft target-densitydpi, die die Dichtestufe des Zielgeräts angibt und bestimmt, wie viele physische Pixel 1px in CSS darstellt.

Beachten Sie insbesondere, dass, wenn target-densitydpi=device-dpi, 1px in CSS gleich 1 physischem Pixel ist.

Da diese Eigenschaft nur von Android unterstützt wird und Android beschlossen hat, sie abzuschaffen,target-densitydpisollten wir ihre Verwendung vermeiden.

V. Festlegen der aktuellen Viewport-Breite auf die ideale Viewport-Breite

Um den idealen Viewport zu erhalten, müssen Sie die Breite des Standard-Layout-Viewports auf die Bildschirmbreite des Mobilgeräts festlegen. Da width im Meta-Viewport die Breite des Layout-Viewports steuern kann, müssen wir width nur auf den speziellen Wert width-device setzen.

<meta name="viewport" content="width=device-width">

Die folgende Abbildung zeigt die Testergebnisse dieser Codezeile in wichtigen mobilen Browsern:

Man kann sehen, dass mit width=device-width alle Browser die aktuelle Viewport-Breite in die ideale Viewport-Breite umwandeln können. Beachten Sie jedoch, dass auf iPhone und iPad, egal ob im Hoch- oder Querformat, die Breite die ideale Viewport-Breite im Hochformat ist.

Diese Vorgehensweise sieht nach etwas aus, das jeder tun kann – auch wenn Sie noch nie Schweinefleisch gegessen haben, haben Sie sicher schon ein Schwein rennen sehen. Tatsächlich, wenn Sie Webseiten für mobile Geräte entwickeln, kann diese eine Codezeile alles sein, was Sie brauchen, unabhängig davon, ob Sie verstehen, was ein Viewport ist.

Aber Sie wissen wahrscheinlich nicht, dass

<meta name="viewport" content="initial-scale=1">

Diese Codezeile kann ebenfalls denselben Effekt wie die vorherige erzielen und den aktuellen Viewport in den idealen Viewport umwandeln.

Ha, überrascht? Denn theoretisch verhindert diese Codezeile nur, dass die aktuelle Seite gezoomt wird, was bedeutet, dass die Seite in ihrer natürlichen Größe bleibt. Warum hat sie dann denselben Effekt wie width=device-width?

Um das zu verstehen, müssen Sie zunächst herausfinden, worauf sich der Zoom bezieht. Da der Zoom-Wert hier 1 ist, also kein Zoom, und dennoch der ideale Viewport-Effekt erzielt wird, kann es nur eine Antwort geben: Der Zoom bezieht sich auf den idealen Viewport. Wenn der ideale Viewport auf 100 % gezoomt wird, d. h. Zoom-Wert 1, erhält man dann nicht den idealen Viewport? In der Praxis ist dies tatsächlich der Fall. Die folgende Abbildung zeigt die Testergebnisse in wichtigen mobilen Browsern, wenn man einstellt,ob <meta name="viewport" content="initial-scale=1"> die aktuelle Viewport-Breite in die ideale Viewport-Breite umwandeln kann.

Die Testergebnisse zeigen, dass initial-scale=1 ebenfalls die aktuelle Viewport-Breite in die ideale Viewport-Breite umwandeln kann. Doch dieses Mal setzt IE unter Windows Phone die Breite im Hochformat unabhängig davon, ob es sich um Hoch- oder Querformat handelt, auf die ideale Viewport-Breite. Dieser kleine Fehler ist jedoch nicht mehr wichtig.

Aber was, wenn width und initial-scale=1 zusammen auftreten und miteinander in Konflikt geraten? Zum Beispiel:

<meta name="viewport" content="width=400, initial-scale=1">

width=400 bedeutet, die aktuelle Viewport-Breite auf 400px zu setzen, während initial-scale=1 bedeutet, die aktuelle Viewport-Breite auf die ideale Viewport-Breite zu setzen. Welcher Anweisung sollte der Browser also folgen? Der später geschriebenen? Nein. In diesem Fall nimmt der Browser den größeren der beiden Werte. Zum Beispiel, wenn width=400 und die ideale Viewport-Breite 320 ist, nimmt er 400; wenn width=400 und die ideale Viewport-Breite 480 ist, nimmt er die ideale Viewport-Breite. (Hinweis: Im UC9-Browser ist bei initial-scale=1 die Viewport-Breite immer die ideale Viewport-Breite, unabhängig davon, welchen Wert das width-Attribut hat.)

Zum Schluss, um zusammenzufassen: Um die aktuelle Viewport-Breite auf die ideale Viewport-Breite festzulegen, kannst du entweder width=device-width oder initial-scale=1 verwenden, aber beide haben einen kleinen Fehler: iPhone, iPad und IE unterscheiden nicht zwischen Hoch- und Querformat, sondern verwenden immer die ideale Viewport-Breite im Hochformat. Daher ist der perfekteste Ansatz, beide zusammen zu schreiben. Auf diese Weise löst initial-scale=1 das iPhone/iPad-Problem und width=device-width löst das IE-Problem:

<meta name="viewport" content="width=device-width, initial-scale=1">

VI. Mehr Wissen über meta viewport

1. Über Skalierung und den Standardwert von initial-scale

Zunächst besprechen wir das Zoom-Problem. Wie bereits erwähnt, ist der Zoom relativ zum idealen Viewport. Je größer der Zoomwert, desto kleiner die aktuelle Viewport-Breite, und umgekehrt. Zum Beispiel beträgt auf dem iPhone die ideale Viewport-Breite 320px. Wenn wir initial-scale=2 festlegen, beträgt die Viewport-Breite nur noch 160px. Das ist leicht zu verstehen: Bei 1x Vergrößerung wird aus ursprünglich 1px 2px. Aber dass aus 1px 2px wird, bedeutet nicht, dass aus den ursprünglichen 320px 640px werden; vielmehr wird bei unveränderter tatsächlicher Breite 1px genauso lang wie ursprünglich 2px. Nach 2x Vergrößerung benötigt eine Breite, für die ursprünglich 320px zum Ausfüllen nötig waren, jetzt nur noch 160px. Daher können wir eine Formel ableiten:

visual viewport宽度 = ideal viewport宽度  / 当前缩放值

当前缩放值 = ideal viewport宽度  / visual viewport宽度

ps:Die Breite des visuellen Viewports bezieht sich auf die Breite des sichtbaren Bereichs des Browsers.

Die meisten Browser entsprechen dieser Theorie, aber der native Browser unter Android und IE haben einige Probleme. Der in Android integrierte WebKit-Browser verhält sich nur dann normal, wenn initial-scale=1 gesetzt ist und kein width-Attribut festgelegt wurde, was bedeutet, dass diese Theorie auf ihn im Grunde nicht zutrifft. IE hingegen ignoriert das initial-scale-Attribut vollständig; egal, worauf du es setzt, initial-scale verhält sich immer wie 1.

Okay, jetzt sprechen wir über das Problem des Standardwerts von initial-scale. Das heißt, wenn dieses Attribut nicht angegeben wird, welchen Standardwert hat es dann? Offensichtlich wird es nicht 1 sein, denn wenn initial-scale = 1, wird die aktuelle Breite des Layout-Viewports auf die Breite des idealen Viewports gesetzt. Aber wie bereits erwähnt, sind die Standardbreiten des Layout-Viewports in verschiedenen Browsern im Allgemeinen Werte wie 980, 1024, 800 usw. Kein Browser beginnt mit der Breite des idealen Viewports, daher ist der Standardwert von initial-scale definitiv nicht 1. Auf Android-Geräten scheint es keine Möglichkeit zu geben, den Standardwert von initial-scale zu ermitteln, oder er hat einfach keinen Standardwert; er wird nur wirksam, wenn man ihn explizit ausschreibt. Kümmern wir uns nicht darum. Hier konzentrieren wir uns auf den Standardwert von initial-scale auf iPhone und iPad.

Tests zufolge können wir für iPhone und iPad zu folgendem Schluss kommen: Unabhängig davon, welche Breite Sie für den Layout-Viewport festlegen, berechnen iPhone und iPad automatisch den Wert von initial-scale, wenn Sie keinen Wert für initial-scale angeben, um sicherzustellen, dass die aktuelle Breite des Layout-Viewports der Breite des sichtbaren Bereichs des Browsers nach der Skalierung entspricht, was bedeutet, dass keine horizontale Bildlaufleiste erscheint. Wenn wir beispielsweise auf dem iPhone kein viewport-meta-Tag festlegen, beträgt die Breite des Layout-Viewports zu diesem Zeitpunkt 980px, aber wir können sehen, dass der Browser keine horizontale Bildlaufleiste anzeigt; der Browser verkleinert die Seite standardmäßig. Nach der obigen Formel,aktueller Skalierungswert = Breite des idealen Viewports / Breite des visuellen Viewports, können wir Folgendes schließen:

当前缩放值 = 320 / 980

Das heißt, der aktuelle Standardwert von initial-scale sollte etwa 0.33 betragen. Wenn Sie einen Wert für initial-scale angeben, hat dieser Standardwert keine Wirkung mehr.

Kurz gesagt, merken Sie sich einfach diese Schlussfolgerung: Auf iPhone und iPad wird, egal welche Breite Sie für den Viewport festlegen, wenn kein Standard-Skalierungswert angegeben ist, iPhone und iPad diesen Skalierungswert automatisch berechnen, um das Ziel zu erreichen, eine horizontale Bildlaufleiste auf der aktuellen Seite zu verhindern (oder mit anderen Worten, die Viewport-Breite gleich der Bildschirmbreite zu machen).

2. Dynamisches Ändern des meta-viewport-Tags

Die erste Methode

Sie können document.write verwenden, um das meta-viewport-Tag dynamisch auszugeben, zum Beispiel:

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

Die zweite Methode

Ändern Sie es über setAttribute

<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>

Ein Fehler im integrierten Browser von Android 2.3

<meta name="viewport" content="width=device-width">

<script type="text/javascript">
alert(document.documentElement.clientWidth); //弹出600，正常情况应该弹出320
</script>

<meta name="viewport" content="width=600">

<script type="text/javascript">
alert(document.documentElement.clientWidth); //弹出320，正常情况应该弹出600
</script>

Die ideale Viewport-Breite des getesteten Telefons beträgt 320px. Der erste Popup-Wert ist 600, aber dieser Wert sollte das Ergebnis der zweiten Zeile der Meta-Tags sein; dann ist der zweite Popup-Wert 320, was der Effekt ist, der durch die erste Zeile der Meta-Tags erzielt wird. Daher kann im integrierten Browser von Android 2.3 (vielleicht allen 2.x-Versionen) das Überschreiben oder Ändern des meta-viewport-Tags sehr verwirrende Ergebnisse erzeugen.

VII. Fazit

Nach so viel Unsinn ist es dennoch notwendig, am Ende etwas Nützliches zusammenzufassen.

Erstens: Wenn das meta-viewport-Tag nicht gesetzt ist, beträgt der Standardbreitenwert in Browsern mobiler Geräte 800px, 980px, 1024px usw. Kurz gesagt, er ist größer als die Bildschirmbreite. Die hier für die Breite verwendete Einheit px bezieht sich auf px in CSS, was nicht dasselbe ist wie das px, das die tatsächlichen physischen Pixel des Bildschirms darstellt.

Zweitens hat jeder Browser eines mobilen Geräts eine ideale Breite. Diese ideale Breite bezieht sich auf die Breite in CSS und hat nichts mit der physischen Breite des Geräts zu tun. In CSS entspricht diese Breite der durch 100% dargestellten Breite. Wir können das Meta-Tag verwenden, um die Viewport-Breite auf diese ideale Breite festzulegen. Wenn Sie die ideale Breite dieses Geräts nicht kennen, können Sie den speziellen Wert device-width verwenden. Gleichzeitig hat initial-scale=1 auch den Effekt, die Viewport-Breite auf die ideale Breite festzulegen. Also können wir

<meta name="viewport" content="width=device-width, initial-scale=1">

um einen idealen Viewport zu erhalten (das heißt, den zuvor erwähnten idealen Viewport).

Warum brauchen wir einen idealen Viewport? Ein Telefon mit einer Auflösung von 320x480 hat beispielsweise eine ideale Viewport-Breite von 320px, während ein anderes Telefon mit derselben Bildschirmgröße, aber einer Auflösung von 640x960 ebenfalls eine ideale Viewport-Breite von 320px hat. Warum sollte die ideale Breite des Telefons mit höherer Auflösung dieselbe sein wie die des Telefons mit niedrigerer Auflösung? Das liegt daran, dass nur so dieselbe Website auf Geräten mit unterschiedlichen Auflösungen gleich oder ähnlich aussehen kann. Tatsächlich lassen sich die idealen Viewport-Breiten der vielen verschiedenen Telefontypen, Marken und Auflösungen auf dem Markt auf nur wenige Werte wie 320, 360, 384, 400 usw. zusammenfassen, die alle sehr nahe beieinanderliegen. Ähnliche ideale Breiten bedeuten, dass sich eine für den idealen Viewport eines bestimmten Geräts entwickelte Website auf anderen Geräten nicht sehr unterschiedlich verhalten oder sogar gleich verhalten wird.

Originaladresse: https://www.cnblogs.com/2050/p/3877280.html