css oder Ist das Viewport-Meta-Tag wirklich notwendig?



viewport initial scale fit to screen (6)

Ich habe ein paar responsive Seiten erstellt, bin aber ziemlich neu in der Responsive Site Entwicklung. In meinem CSS sind 99% meiner Werte in ems oder Prozentsätzen. Ich verwende Medienabfragen (sowohl maximale Breite als auch maximale Gerätebreite), um Layoutänderungen vorzunehmen. Ich habe kein Viewport-Meta-Tag hinzugefügt und es funktioniert perfekt auf iOS, einer Reihe von Android-Telefonen und -Tablets, auf denen ich getestet habe, und allen Desktop-Browsern.

Das Hinzufügen eines Meta-Tags unterbricht meine Website. Mache ich etwas falsch oder mache ich etwas richtig, damit ich es nicht hinzufügen muss? Ich bin verwirrt, warum es eine Best Practice zu sein scheint, da es meine Sachen kaputt macht.

Fehle ich etwas?


Answer #1

Also um meine eigene Frage zu 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 ich schon sagte, erhöht sich in erster Linie die Schriftgröße für die Lesbarkeit.

Diese Methode hat jedoch ein großes Wartungsproblem.

Mit dem Viewport-Meta-Tag können Sie einfach die maximale und minimale Breite zwischen Desktop und Mobilgeräten verwenden.


Answer #2

Ja, es ist ein notwendiger Tag für die Entwicklung responsiver Websites. Die Verwendung des Tags allein wird Ihnen zwar nicht helfen, aber sie machen es definitiv einfacher, responsive Websites zu entwickeln, indem Sie die Größe des sichtbaren Inhalts Ihrer Webseite kontrollieren können .


Answer #3

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

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

Mit einer maximalen Skalierung können Sie steuern, wie der Benutzer es zoomen kann. Ich denke, wir sollten diese Option aktivieren, denn selbst mit einer reaktionsfreudigen Website, die ich zoomen möchte, lernt sie, dass sie bereits so intuitiv ist, dass sie zur Erwartung wird.


Answer #4

Sie sollten auf jeden Fall Ansichtsfenster-Tags verwenden , da sie das Leben eines Web-Entwicklers unendlich vereinfachen können. Sie ermöglichen es Ihnen, die genauen Render-Dimensionen und / oder Zoom-Level eines beliebigen Bildschirms (auch auf dem desktop wenn Sie möchten) einfach zu steuern. Das macht den Aufbau einer Website für jedes Gerät zum Kinderspiel. Aber wissen Sie, dass mit großer Macht große Verantwortung verbunden ist. Verwenden Sie diese Energie mit Bedacht (und deaktivieren Sie nicht das Zoomen).


Answer #5

Ohne Ansichtsfenster verwendet Ihr Gerät ein virtuelles Ansichtsfenster, das standardmäßig eine herausgezoomte Version Ihrer Website ist, das sind etwa 980 Pixel auf dem iPhone und 800 Pixel auf andriod. Sobald Sie das Ansichtsfenster einstellen und das Auszoomen deaktivieren, behandelt das Gerät die Website wie gewünscht und misst je nach Gerät und Ausrichtung etwa 480 Pixel breit oder 320 Pixel.

Volle Ressource hier unten, mein Rat ist, dass immer, wenn Sie mit Responsive & Mobile arbeiten, das Ansichtsfenster immer zuerst setzen. Dies ist der beste Weg, um den Gerätezoom zu normalisieren und sicherzustellen, dass Ihre Website mit einer tatsächlichen Gerätebreite angezeigt wird, im Gegensatz zu virtuellen Breiten.

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


Answer #6

Auf Desktop-Betriebssystemen haben Browser-Ansichtsfenster eine feste Anzahl von Pixeln, und der Inhalt der Webseite wird unverändert übernommen.

Beginnend mit Safari unter iOS (oder wie auch immer wir damals iOS nennen sollten), waren die Ansichtsfenster von mobilen Browsern "virtuell". Obwohl das Ansichtsfenster in der Benutzeroberfläche beispielsweise nur Platz von 320 physikalischen Pixeln benötigt, erstellt der Browser ein "virtuelles" Ansichtsfenster, das größer ist (auf iOS standardmäßig 980 Pixel breit) und Inhalte dort rendert. Dann wird das virtuelle Ansichtsfenster verkleinert, bis es in die tatsächlichen physischen Pixel passt, die auf dem Bildschirm des Geräts verfügbar sind.

Mit dem Viewport-Metatag können Sie dem mobilen Browser mitteilen, wie groß dieses virtuelle Ansichtsfenster sein sollte. Dies ist oft nützlich, wenn Sie das Design Ihrer Website nicht für Mobilgeräte ändern und es mit einem größeren oder kleineren virtuellen Ansichtsfenster besser dargestellt wird. (Ich glaube, dass 980 Pixel als Standard gewählt wurden, da es im Jahr 2007 viele hochkarätige Websites gut dargestellt hat; für jede Site könnte ein anderer Wert besser sein.)

Persönlich verwende ich immer <meta name="viewport" content="width=device-width, initial-scale=1"> damit das virtuelle Ansichtsfenster den Gerätedimensionen entspricht. (Beachten Sie, dass initial-scale=1 notwendig ist, damit sich das virtuelle Ansichtsfenster bei iOS auf den Querformat-Modus einstellt .) Das führt dazu, dass sich mobile Browser so verhalten, wie Desktop-Browser es immer tun.

Ohne ein Viewport-Meta-Tag wird Ihre Site in das virtuelle Standard-Ansichtsfenster des Geräts gerendert. Ich denke nicht, dass das notwendigerweise ein Problem ist, besonders wenn alle deine Einheiten Ems oder Prozentsätze sind, wie du sagst. Es kann jedoch etwas verwirrend sein, wenn Sie zu irgendeinem Zeitpunkt in Pixel denken müssen, insbesondere, da verschiedene Browser unterschiedliche virtuelle Standard-Ansichtsfenster haben könnten. Es könnte auch für nachfolgende Betreuer verwirrend sein, wenn sie den Ansatz nicht verstehen.

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





viewport