wake-up-neo.com

Ist das Viewport-Meta-Tag wirklich notwendig?

Ich habe einige responsive Sites erstellt, bin aber für die responsive Site-Entwicklung eher neu. In meiner CSS sind 99% meiner Werte in Ems oder Prozent. Ich verwende Medienabfragen (sowohl max-width als auch max-device-width), um Layoutänderungen vorzunehmen. Ich habe kein Viewport-Meta-Tag enthalten. Es funktioniert perfekt auf iOS, einer Reihe von Android-Handys und -Tablets, die ich getestet habe, und auf allen Desktop-Browsern. 

Das Hinzufügen eines Meta-Tags bricht meine Site. Mache ich etwas falsch oder etwas richtig, damit ich es nicht hinzufügen muss? Ich bin verwirrt darüber, warum es eine gute Praxis zu sein scheint, da es meine Sachen kaputt macht.

Fehlt mir etwas?

42
Jeffpowrs

Auf Desktop-Betriebssystemen haben Browser-Ansichtsfenster eine feste Pixelbreite und der Webseiteninhalt wird unverändert wiedergegeben.

Beginnend mit Safari unter iOS (oder was auch immer wir damals als iOS bezeichneten), waren die Ansichtsfenster für mobile Browser "virtuell". Obwohl das Ansichtsfenster möglicherweise nur 320 physische Pixel Platz in der Benutzeroberfläche beansprucht, erstellt der Browser ein "virtuelles" Ansichtsfenster, das größer ist (standardmäßig 980 Pixel unter iOS) und Inhalte darin wiedergibt. Zoomt dann das virtuelle Ansichtsfenster heraus, bis es in die tatsächlichen physischen Pixel passt, die auf dem Bildschirm des Geräts verfügbar sind.

Mit dem Viewport-Meta-Tag können Sie dem mobilen Browser mitteilen, wie groß dieses virtuelle Viewport sein soll. Dies ist häufig hilfreich, wenn Sie das Design Ihrer Website für Handys nicht ändern und es mit einem größeren oder kleineren virtuellen Ansichtsfenster besser rendert. (Ich glaube, 980 Pixel wurden als Standard gewählt, weil es 2007 viele hochkarätige Websites gerendert hat. Für jede Website ist möglicherweise ein anderer Wert besser.)

Persönlich verwende ich immer <meta name="viewport" content="width=device-width, initial-scale=1">, damit das virtuelle Ansichtsfenster mit den Geräteabmessungen übereinstimmt. (Beachten Sie, dass initial-scale=1 erforderlich zu sein scheint, damit sich das virtuelle Ansichtsfenster an den Querformatmodus unter iOS anpasst .) Dadurch verhalten sich mobile Browser so, wie Desktop-Browser es immer getan haben zu.

Ohne ein Viewport-Meta-Tag wird Ihre Site im virtuellen Standard-Viewport des Geräts gerendert. Ich denke nicht, dass dies notwendigerweise ein Problem ist, besonders wenn alle Ihre Einheiten ems oder Prozentsätze sind, wie Sie sagen. Es kann jedoch etwas verwirrend sein, wenn Sie zu irgendeinem Zeitpunkt in Pixeln denken müssen, zumal verschiedene Browser standardmäßig virtuelle Ansichtsfenster unterschiedlicher Größe haben können. Es kann auch verwirrend für nachfolgende Betreuer sein, wenn sie den Ansatz nicht verstehen.

Ich stelle mir vor, Sie haben Ihre Basisschriftgröße ziemlich groß eingestellt, damit sie lesbar ist? Können Sie auf eine der von Ihnen erstellten Websites verlinken, damit wir ein Beispiel sehen können?

65
Paul D. Waite

Also meine eigene Frage beantworten. Es ist nicht erforderlich.

Sie können Medienabfragen mit minimaler und maximaler Breite verwenden, um die Desktopversion an bestimmten Haltepunkten zu formatieren.

Sie aktualisieren dann hauptsächlich die Schriftgröße und andere Eigenschaften speziell für Tablets und Telefone. Wie gesagt, erhöht dies hauptsächlich die Schriftgröße, um die Lesbarkeit zu verbessern.

Diese Methode hat jedoch ein erhebliches Wartbarkeitsproblem.

Mit dem Viewport-Meta-Tag können Sie einfach die maximale und minimale Breite verwenden, die vom Desktop bis zu mobilen Geräten reicht.

7
Jeffpowrs

Ohne Viewport verwendet Ihr Gerät ein virtuelles Viewport, das standardmäßig eine verkleinerte Version Ihrer Website ist. Dies ist rund 980 Pixel auf dem iPhone und 800 Pixel auf dem Android-Display. Sobald Sie das Ansichtsfenster festlegen und das Herauszoomen deaktivieren, behandelt das Gerät die Website wie gewünscht und misst je nach Gerät und Ausrichtung usw. etwa 480 Pixel Breite oder 320 Pixel Breite.

Hier finden Sie die vollständige Ressource. Mein Ratschlag lautet: Wenn Sie mit responsive & mobile arbeiten, setzen Sie immer zuerst den Darstellungsbereich. Dies ist der beste Weg, um den Geräte-Zoom zu normalisieren und sicherzustellen, dass Ihre Site mit einer tatsächlichen Gerätebreite im Gegensatz zu einer beliebigen virtuellen Breite angezeigt wird.

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

7
JamieM23

Nicht für alle Geräte, aber Ja für Mobiles . Mobile Browser rendern Seiten in einem virtuellen "Fenster". Der Darstellungsbereich ist normalerweise breiter als der Bildschirm, sodass nicht jedes Seitenlayout in ein winziges Fenster (daher auch ein kleines Fenster) eingefügt werden muss Es bricht einige nicht für Mobilgeräte optimierte Websites und Benutzer müssen zoomen. Mobile Safari hat das "Viewport-Meta-Tag" eingeführt, mit dem Webentwickler die Größe und die Skalierung des Viewports steuern können. Jetzt unterstützen alle mobilen Browser dieses Tag, obwohl es nicht Teil eines Webstandards ist . Eine typische für Mobilgeräte optimierte Website sollte das folgende Tag enthalten:

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

Die Breite-Eigenschaft steuert die Größe des Ansichtsfensters. Breite des Bildschirms in CSS-Pixeln bei einer Skalierung von 100%. Die Anfangskalierungseigenschaft steuert die Zoomstufe beim ersten Laden der Seite. Die Eigenschaften für die maximale Skalierung, die minimale Skalierung und die vom Benutzer skalierbaren Eigenschaften steuern, wie Benutzer die Seite vergrößern oder verkleinern dürfen.

https://developer.Apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//Apple_ref/doc/uid/TP40006509-SW19

4
Shantanu

Sie sollten auf jeden Fall Viewport-Tags verwenden, da diese die Fähigkeit eines Web-Entwicklers wesentlich einfacher machen. Sie ermöglichen Ihnen die einfache Steuerung der genauen Render-Abmessungen und/oder Zoomstufen eines beliebigen Bildschirms (sogar auf desktop wenn Sie möchten). Dies macht das Erstellen einer Website für jedes Gerät zum Kinderspiel. Aber wissen Sie, dass mit großer Kraft eine große Verantwortung entsteht. Verwenden Sie diese Kraft weise (und deaktivieren Sie das Zoomen nicht).

3
JoostS

Sie können den Viewport-Metatag weiterhin verwenden, um die Auflösung für die Geräteansicht zu optimieren und dem Benutzer Zoomen zu ermöglichen:

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

Mit einer definierten maximalen Skala können Sie steuern, wie der Benutzer sie zoomt. Ich denke, wir sollten diese Option aktivieren, denn selbst mit einer responsiven Website möchte ich das Zoomen, es lernt das bereits, es ist so intuitiv, dass es zu Erwartungen wird.

Ja, es ist ein notwendiges Tag für die Entwicklung von responsiven Websites. Die Verwendung des Tags allein wird Ihnen jedoch nicht helfen, aber sie erleichtern auf jeden Fall die Entwicklung von responsiven Sites, indem Sie die Größe des sichtbaren Inhalts Ihrer Webseite steuern .

1
aditya

Für jeden, der Zweifel hat, ist der einfachste Weg, ohne zu testen. Ich tat es und kam zu einer schnellen Lösung - wenn ich nur ein Meta-Tag behalten müsste, wäre dies (über 'Beschreibung' und was auch immer). Wenn ich nur zwischen diesem und allen anderen wählen müsste, würde ich alles geben und alles weg. Teste es einfach!

0