Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport

Beim Rekonstruieren oder Entwickeln von Webseiten auf mobilen Geräten müssen Sie zunächst das Ansichtsfenster auf dem mobilen Gerät verstehen. Nur wenn wir das Konzept des Ansichtsfensters verstehen und die Verwendung von Meta-Tags im Zusammenhang mit dem Ansichtsfenster herausfinden, können wir es besser machen . Passen Sie mobile Geräte mit unterschiedlichen Auflösungen an oder reagieren Sie darauf.

Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport. Das Konzept des Ansichtsfensters

Laienhaft ausgedrückt ist das Ansichtsfenster auf einem mobilen Gerät der Bildschirm des Geräts, der verwendet werden kann um unsere Webseite anzuzeigen Der Bereich ist genau genommen der Bereich im Browser (es kann sich auch um die Webansicht in einer App handeln), der zum Anzeigen der Webseite verwendet wird, aber der Ansichtsbereich ist nicht auf den im Browser sichtbaren Bereich beschränkt Größe, die größer oder kleiner als der sichtbare Bereich des Browsers sein kann. Im Allgemeinen ist das Ansichtsfenster auf Mobilgeräten größer als der sichtbare Bereich des Browsers. Dies liegt daran, dass die Auflösung mobiler Geräte kleiner ist als die von Desktop-Computern, sodass herkömmliche Websites für diese Zwecke entwickelt wurden Desktop-Browser werden normalerweise auf dem Gerät angezeigt. Der Browser auf dem mobilen Gerät stellt seinen Standardansichtsbereich auf 980 Pixel oder Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixel ein (es können auch andere Werte sein, dies wird vom Gerät selbst bestimmt), jedoch mit der Folge, dass ein horizontaler Bildlauf erfolgt Die Leiste wird im Browser angezeigt, da die Breite des sichtbaren Bereichs des Browsers kleiner ist als die Breite des Standardansichtsfensters. Das Bild unten listet die Standard-Ansichtsfensterbreiten von Browsern auf einigen Geräten auf.

Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport. Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixel in CSS ist nicht gleich Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixel des Geräts

In CSS haben wir im Allgemeinen Wenn wir px als Einheit verwenden, entspricht Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixel von CSS in Desktop-Browsern oft einem physischen Pixel des Computerbildschirms. Dies kann uns die Illusion vermitteln, dass die Pixel in CSS die physischen Pixel des Geräts sind. Die tatsächliche Situation ist jedoch nicht so. In verschiedenen Geräten oder Umgebungen sind die physischen Pixel des Geräts, die in CSS dargestellt werden, unterschiedlich. Bei Webseiten, die für Desktop-Browser konzipiert sind, müssen wir uns darüber keine Sorgen machen, aber auf mobilen Geräten ist es notwendig, dies zu verstehen. Bei früheren Mobilgeräten war die Pixeldichte des Bildschirms relativ gering, beispielsweise beim iPhone Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport, das eine Auflösung von Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0 x Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport80 hatte. Beim iPhone Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport entsprach ein CSS-Pixel tatsächlich einem physischen Pixel auf dem Bildschirm. Später, mit der Entwicklung der Technologie, wurde die Bildschirmpixeldichte mobiler Geräte immer höher. Ab dem iPhone Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport brachte Apple den sogenannten Retina-Bildschirm auf den Markt, der die Auflösung auf Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0 x 9Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0 verdoppelte, die Bildschirmgröße änderte sich jedoch nicht bedeutet, dass auf einem Bildschirm gleicher Größe doppelt so viele Pixel vorhanden sind. Zu diesem Zeitpunkt entspricht ein CSS-Pixel zwei physischen Pixeln. Das Gleiche gilt auch für Mobilgeräte anderer Marken. Beispielsweise können Android-Geräte entsprechend der Bildschirmpixeldichte in verschiedene Ebenen unterteilt werden, z. B. ldpi, mdpi, hdpi, xhdpi usw., und die Auflösungen sind auch unterschiedlich. Ein CSS-Pixel auf einem Android-Gerät entspricht der Anzahl Es gibt keine physischen Pixel auf dem Bildschirm, was auch von Gerät zu Gerät unterschiedlich ist. Es gibt keine Schlussfolgerung.

Es gibt noch einen weiteren Faktor, der ebenfalls zu Änderungen der px in CSS führen kann, und das ist die Benutzerskalierung. Wenn der Benutzer beispielsweise die Seitengröße verdoppelt, verdoppeln sich auch die physischen Pixel, die in CSS durch Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixel dargestellt werden. Wenn die Seite hingegen verdoppelt wird, werden auch die physischen Pixel verdoppelt, die in CSS durch Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixel dargestellt werden. Dieser Punkt wird später im Artikel besprochen.

In mobilen Browsern und einigen Desktop-Browsern verfügt das Fensterobjekt über ein devicePixelRatio-Attribut. Seine offizielle Definition lautet: das Verhältnis von physischen Gerätepixeln zu geräteunabhängigen Pixeln Pixel/unabhängiges Pixel. px in CSS kann als unabhängiges Pixel des Geräts betrachtet werden, sodass wir über devicePixelRatio wissen können, wie viele physische Pixel ein CSS-Pixel auf dem Gerät darstellt. Auf einem iPhone mit Retina-Bildschirm beträgt der Wert von devicePixelRatio beispielsweise Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport, was bedeutet, dass Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport CSS-Pixel Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport physischen Pixeln entspricht. Es ist jedoch zu beachten, dass es bei devicePixelRatio immer noch einige Kompatibilitätsprobleme in verschiedenen Browsern gibt, sodass wir diesem Ding derzeit nicht vollständig vertrauen können. Für bestimmte Situationen lesen Sie bitte diesen Artikel.

Testergebnisse von devicePixelRatio:

Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport. PPKs Theorie der drei Ansichtsfenster

ppk master hat viel über Viewports auf mobilen Geräten recherchiert (Teil Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport, Teil Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport, Teil Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport). Viele Daten und Meinungen in diesem Artikel stammen ebenfalls. ppk geht davon aus, dass es auf Mobilgeräten drei Ansichtsfenster gibt.

Erstens glauben Browser auf mobilen Geräten, dass sie die korrekte Anzeige aller Websites ermöglichen müssen, auch derjenigen, die nicht für mobile Geräte entwickelt wurden. Wenn jedoch der sichtbare Bereich des Browsers als Ansichtsfenster verwendet wird, ist das Ansichtsfenster des Mobilgeräts zwangsläufig zu eng, wenn Websites, die für Desktop-Browser entwickelt wurden, auf Mobilgeräten angezeigt werden, da die Bildschirme mobiler Geräte nicht sehr breit sind . Und wenn Sie zusammengedrängt sind, wird sogar das Layout durcheinander gebracht. Manche Leute fragen sich vielleicht: Gibt es mittlerweile nicht viele Mobiltelefone mit sehr hohen Auflösungen wie Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport8 x Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport oder Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport080 x Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport9Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0? Ist es für solche Mobiltelefone in Ordnung, Websites anzuzeigen, die für Desktop-Browser entwickelt wurden? Wie bereits erwähnt, stellt Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixel in CSS nicht Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixel auf dem Bildschirm dar. Je größer Ihre Auflösung, desto mehr physische Pixel werden in CSS dargestellt und desto größer ist der Wert von devicePixelRatio. Dies ist leicht zu verstehen, da Sie die Auflösung haben hat zugenommen, aber die Bildschirmgröße hat nicht viel zugenommen. Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixel in CSS muss mehr physische Pixel darstellen, damit die Größe von Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixel auf dem Bildschirm der von Geräten mit niedriger Auflösung ähnelt, andernfalls wird es zu klein, um klar zu sehen. Auf einem Gerät wie Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport080 x Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport9Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0 müssen Sie daher möglicherweise standardmäßig nur die Breite eines p auf mehr als Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00 px einstellen (abhängig vom Wert von devicePixelRatio), was der vollen Bildschirmbreite entspricht. Zurück zum Thema: Wenn der sichtbare Bereich des Browsers auf einem mobilen Gerät auf den Ansichtsbereich eingestellt ist, werden einige Websites unübersichtlich angezeigt, weil der Ansichtsbereich zu eng ist. Daher entscheiden sich diese Browser dafür, den Ansichtsbereich standardmäßig auf einen breiteren Bereich einzustellen .-Wert, z. B. 980px, sodass auch für Desktops konzipierte Websites auf mobilen Browsern normal angezeigt werden können. ppk ruft das Standard-Ansichtsfenster dieses Browsers Layout-Ansichtsfenster auf. Die Breite dieses Layout-Ansichtsfensters kann über document.documentElement.clientWidth ermittelt werden.

Allerdings ist die Breite des Layout-Ansichtsfensters größer als die Breite des sichtbaren Bereichs des Browsers, daher benötigen wir auch ein Ansichtsfenster, um die Größe des sichtbaren Bereichs des Browsers darzustellen Bereich. ppk nennt dieses Ansichtsfenster visuelles Ansichtsfenster. Die Breite des visuellen Ansichtsfensters kann über window.innerWidth ermittelt werden, sie kann jedoch in Android Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport, Oprea mini und UC 8 nicht korrekt ermittelt werden.

Jetzt haben wir zwei Ansichtsfenster: Layout-Ansichtsfenster und visuelles Ansichtsfenster . Der Browser ist jedoch der Meinung, dass dies nicht ausreicht, da immer mehr Websites jetzt separat für mobile Geräte entwickelt werden und daher ein Ansichtsfenster vorhanden sein muss, das sich perfekt an mobile Geräte anpassen lässt. Die sogenannte perfekte Anpassung bedeutet, dass der Benutzer erstens den gesamten Inhalt der Website normal anzeigen kann, ohne dass Zoomen und horizontale Bildlaufleisten erforderlich sind. Zweitens ist die Größe des angezeigten Textes beispielsweise angemessen Text mit Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixeln wird aufgrund der Größe des Texts nicht angezeigt, da die Anzeige auf einem Bildschirm mit hoher Pixeldichte zu klein ist, um klar gesehen zu werden. Im Idealfall ist die Größe dieses Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport-Pixel-Textes unabhängig von der Dichte ähnlich Bildschirm und welche Auflösung. Dies gilt natürlich nicht nur für Text, sondern auch für andere Elemente wie Bilder und so weiter. ppk nennt dieses Ansichtsfenster ideales Ansichtsfenster, welches das dritte Ansichtsfenster ist – das ideale Ansichtsfenster für mobile Geräte.

Das ideale Ansichtsfenster hat keine feste Größe. Verschiedene Geräte haben unterschiedliche ideale Ansichtsfenster. Die ideale Darstellungsbreite aller iPhones beträgt Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0 Pixel, unabhängig davon, ob die Bildschirmbreite Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0 oder Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0 beträgt. Das heißt, beim iPhone stellen Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0 Pixel in CSS die Breite des iPhone-Bildschirms dar.

Aber Android-Geräte sind komplizierter, es gibt Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0 Pixel, Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0 Pixel, Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport8Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Pixel usw. Die ideale Ansichtsfensterbreite verschiedener Geräte ist Wie groß? finden Sie unter http://viewportsizes.com, wo die idealen Breiten für viele Geräte gesammelt sind.

Um es zusammenzufassen: ppk unterteilt den Ansichtsbereich auf Mobilgeräten in Layout-Ansichtsbereich, visueller Ansichtsbereich und Ideales Ansichtsfenster Drei Kategorien, von denen das ideale Ansichtsfenster das am besten geeignete für mobile Geräte ist. Die Breite des idealen Ansichtsfensters entspricht der Bildschirmbreite des mobilen Geräts auf das ideale Ansichtsfenster in CSS-Breite eingestellt (Einheit ist px), dann entspricht die Breite dieses Elements der Breite des Gerätebildschirms, was der Auswirkung einer Breite von Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00 % entspricht. Die Bedeutung des idealen Ansichtsbereichs besteht darin, dass Websites, die für den idealen Ansichtsbereich konzipiert sind, den Benutzern unabhängig von der verwendeten Bildschirmauflösung perfekt präsentiert werden können, ohne dass Benutzer manuell zoomen oder horizontale Bildlaufleisten verwenden müssen.

Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport. Verwenden Sie Meta-Tags, um das Ansichtsfenster zu steuern

Das Standard-Ansichtsfenster für mobile Geräte ist das Layout-Ansichtsfenster, das breiter ist als das Bildschirmansichtsfenster, aber wenn wir Websites für mobile Geräte entwickeln, brauchen wir ein ideales Ansichtsfenster. Wie erhalte ich also das ideale Ansichtsfenster? Jetzt ist das Meta-Tag an der Reihe.

Wenn wir eine Website für mobile Geräte entwickeln, besteht eine der häufigsten Aktionen darin, Folgendes in unseren head-Tag zu kopieren:

<meta name="viewport" content="width=device-width, initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport.0, maximum-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport.0, user-scalable=0">

Dies Die Funktion von Mit dem Meta-Tag soll die Breite des aktuellen Ansichtsfensters an die Breite des Geräts angepasst werden, ohne dass der Benutzer manuell zoomen kann. Möglicherweise haben verschiedene Websites unterschiedliche Anforderungen, um Benutzern das Zoomen zu ermöglichen, aber jeder möchte die Breite des Ansichtsfensters an die Breite des Geräts anpassen. Wenn Sie es nicht so einstellen, wird das Bildschirmverhältnis verwendet . Das Standardansichtsfenster ist breit, was bedeutet, dass eine horizontale Bildlaufleiste angezeigt wird.

Was genau enthält dieses Meta-Tag namens viewport und welche Funktion hat es?

Das Meta-Viewport-Tag wurde erstmals von Apple in seinem Safari-Browser eingeführt, um das Viewport-Problem mobiler Geräte zu lösen. Später folgten auch Android- und große Browserhersteller und führten die Unterstützung des Meta-Viewports ein. Fakten haben auch bewiesen, dass dieses Ding immer noch sehr nützlich ist.

In den Spezifikationen von Apple hat der Meta-Viewport Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport Attribute (nennen wir diese Dinge in den Inhaltsattributen und -werten), wie folgt:

width

Legen Sie die fest Breite des

width	设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

Layout-Ansichtsfensters

in eine positive Ganzzahl oder die Zeichenfolge „width-device“

initial-scale

Legen Sie den anfänglichen Skalierungswert der Seite fest, bei dem es sich um eine Zahl handelt, wobei Dezimalstellen zulässig sind

minimum-scale

Der vom Benutzer zulässige minimale Skalierungswert ist eine Zahl, die Dezimalstellen enthalten kann

maximum-scale

Der maximal zulässige Zoomwert Der Benutzer ist eine Zahl mit Dezimalstellen

height

Legen Sie die Höhe des

target-densitydpi

值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

Layout-Ansichtsfensters fest. Dieses Attribut ist für uns nicht wichtig und wird selten verwendet.

Benutzerskalierbar

Ob der Benutzer zoomen darf, der Wert ist „nein“ oder „ja“, nein bedeutet nicht erlaubt, Ja bedeutet erlaubt

Diese Attribute können gleichzeitig verwendet werden, einzeln oder gemischt. Wenn mehrere Attribute gleichzeitig verwendet werden, trennen Sie sie einfach durch Kommas. Darüber hinaus unterstützt Android auch das private Attribut target-densitydpi, das die Dichtestufe des Zielgeräts darstellt und verwendet wird, um zu bestimmen, wie viele physische Pixel Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewportpx in CSS darstellt

特别说明的是，当 target-densitydpi=device-dpi 时， css中的Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewportpx会等于物理像素中的Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewportpx。

因为这个属性只有安卓支持，并且安卓已经决定要废弃target-densitydpi  这个属性了，所以这个属性我们要避免进行使用  。

五、把当前的viewport宽度设置为 ideal viewport 的宽度

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

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

下图是这句代码在各大移动端浏览器上的测试结果：

可以看到通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

这样的写法看起来谁都会做，没吃过猪肉，谁还没见过猪跑啊~，确实，我们在开发移动设备上的网页时，不管你明不明白什么是viewport，可能你只需要这么一句代码就够了。

可是你肯定不知道

<meta name="viewport" content="initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport">

这句代码也能达到和前一句代码一样的效果，也可以把当前的的viewport变为 ideal viewport。

呵呵，傻眼了吧，因为从理论上来讲，这句代码的作用只是不对当前的页面进行缩放，也就是页面本该是多大就是多大。那为什么会有 width=device-width 的效果呢？

要想清楚这件事情，首先你得弄明白这个缩放是相对于什么来缩放的，因为这里的缩放值是Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport，也就是没缩放，但却达到了 ideal viewport 的效果，所以，那答案就只有一个了，缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00%的缩放，也就是缩放值为Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport的时候，不就得到了 ideal viewport吗？事实证明，的确是这样的。下图是各大移动端的浏览器当设置了<meta name="viewport" content="initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport"> 后是否能把当前的viewport宽度变成 ideal viewport 的宽度的测试结果。

测试结果表明 initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport 也能把当前的viewport宽度变成 ideal viewport 的宽度，但这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。但这点小瑕疵已经无关紧要了。

但如果width 和 initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport同时出现，并且还出现了冲突呢？比如：

<meta name="viewport" content="width=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00, initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport">

width=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00表示把当前viewport的宽度设为Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00px，initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport则表示把当前viewport的宽度设为ideal viewport的宽度，那么浏览器到底该服从哪个命令呢？是书写顺序在后面的那个吗？不是。当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当width=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00，ideal viewport的宽度为Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0时，取的是Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00；当width=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00， ideal viewport的宽度为Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport80时，取的是ideal viewport的宽度。（ps:在uc9浏览器中，当initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）

最后，总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：

<meta name="viewport" content="width=device-width, initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport">

六、关于meta viewport的更多知识

Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport、关于缩放以及initial-scale的默认值

    首先我们先来讨论一下缩放的问题，前面已经提到过，缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。例如在iphone中，ideal viewport的宽度是Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0px，如果我们设置 initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport ，此时viewport的宽度会变为只有Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0px了，这也好理解，放大了一倍嘛，就是原来Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewportpx的东西变成Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewportpx了，但是Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewportpx变为Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewportpx并不是把原来的Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0px变为Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0px了，而是在实际宽度不变的情况下，Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewportpx变得跟原来的Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewportpx的长度一样了，所以放大Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport倍后原来需要Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0px才能填满的宽度现在只需要Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0px就做到了。因此，我们可以得出一个公式：

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

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

    ps: visual viewport的宽度指的是浏览器可视区域的宽度。

    大多数浏览器都符合这个理论，但是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，无论你给他设置什么，initial-scale表现出来的效果永远是Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport。

    好了，现在再来说下initial-scale的默认值问题，就是不写这个属性的时候，它的默认值会是多少呢？很显然不会是Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport，因为当 initial-scale = Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport宽度一般都是980啊，Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport啊，800啊等等这些个值，没有一开始就是 ideal viewport的宽度的，所以 initial-scale的默认值肯定不是Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport。安卓设备上的initial-scale默认值好像没有方法能够得到，或者就是干脆它就没有默认值，一定要你显示的写出来这个东西才会起作用，我们不管它了，这里我们重点说一下iphone和ipad上的initial-scale默认值。

   根据测试，我们可以在iphone和ipad上得到一个结论，就是无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算initial-scale这个值，以保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度，也就是说不会出现横向滚动条。比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。根据上面的公式，当前缩放值 = ideal viewport宽度  / visual viewport宽度，我们可以得出：

      当前缩放值 = Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0 / 980

也就是当前的initial-scale默认值应该是 0.Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport这样子。当你指定了initial-scale的值后，这个默认值就不起作用了。

总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

        

Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport、动态改变meta viewport标签

第一种方法

可以使用document.write来动态输出meta viewport标签，例如：

document.write(&#Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport9;<meta name="viewport" content="width=device-width,initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport">&#Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport9;)

第二种方法

通过setAttribute来改变 

<meta id="testViewport" name="viewport" content="width = Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport80"><script>var mvp = document.getElementById(&#Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport9;testViewport&#Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport9;);
mvp.setAttribute(&#Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport9;content&#Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport9;,&#Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport9;width=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport80&#Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport9;);</script>

安卓Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport.Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport自带浏览器上的一个bug

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

测试的手机ideal viewport 宽度为Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0px，第一次弹出的值是Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00,但这个值应该是第行meta标签的结果啊，然后第二次弹出的值是Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0，这才是第一行meta标签所达到的效果啊，所以在安卓Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport.Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport(或许是所有Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport.x版本中)的自带浏览器中，对meta viewport标签进行覆盖或更改，会出现让人非常迷糊的结果。

七、结语

说了那么多废话，最后还是有必要总结一点有用的出来。

首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewportpx等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。

第二、每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用

<meta name="viewport" content="width=device-width, initial-scale=Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport">

来得到一个理想的viewport（也就是前面说的ideal viewport）。

为什么需要有理想的viewport呢？比如一个分辨率为Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0xViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport80的手机理想viewport的宽度是Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0px，而另一个屏幕尺寸相同但分辨率为Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0x9Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0的手机的理想viewport宽度也是为Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢？这是因为，只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0、Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-ViewportViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport0、Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport8Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport、Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport00等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。

【相关推荐】

Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport. 特别推荐：“php程序员工具箱”V0.Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport版本下载

Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport. 关于viewport兼容性问题的实例代码

Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport. 分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例

Viewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport. HTMLViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport中Viewport的参数介绍以及使用方法

Das obige ist der detaillierte Inhalt vonViewport-Spezialthema: Vertiefendes Verständnis des responsiven Webdesigns im CSS-Viewport. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!