meta viewport Angabe

[encoder]

Hallo!

Nachdem ich seit Jahren nichts bedeutendes mehr in Sachen Web gemacht habe, packt mich nun doch die Neugier an media queries und dergleichen. Ich bin gerade dabei mich einzulesen.
Dies hier begegnet einem ständig.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Erklärung: Seite passt sich an den Vierport an und ermöglicht Skalieren.

Allerdings fehlt mir die Erklärung. Viewportbreite = Gerätebreite... ist das nicht immer so? Was genau besagt das?

Das einzige was ich noch gefunden habe hat mit der Schriftgröße zu tun. Verkleinert ein Browser also die Schriftgröße bis zur Unkenntlichkeit, wenn diese Angabe fehlt? Was genau hindert ihn daran das zu tun wenn die Angabe da ist?

[Matthias Scharwies]

Servus!

Hallo!

Nachdem ich seit Jahren nichts bedeutendes mehr in Sachen Web gemacht habe, packt mich nun doch die Neugier an media queries und dergleichen. Ich bin gerade dabei mich einzulesen.
Dies hier begegnet einem ständig.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Erklärung: Seite passt sich an den Vierport an und ermöglicht Skalieren.

Allerdings fehlt mir die Erklärung. Viewportbreite = Gerätebreite... ist das nicht immer so? Was genau besagt das?

Das einzige was ich noch gefunden habe hat mit der Schriftgröße zu tun. Verkleinert ein Browser also die Schriftgröße bis zur Unkenntlichkeit, wenn diese Angabe fehlt?

Genau!

SELF-Wiki: HTML/Kopfdaten/meta#Viewport_einstellen

Handys versuchen die Webseite, die ja meist eine Breitenangabe von 100% Breite hat, auf die 2.3Zoll Breite runterzuskalieren. Neulich hatten wir im Forum so jemanden, der das gut fand, da er so einen ersten Überblick vom Aufbau der Webseite bekam und dann groß zoomen konnte.

Was genau hindert ihn daran das zu tun wenn die Angabe da ist?

Die Angabe: initial-scale=1.0,, die die Webseite dann in normaler Schriftgröße anzeigt.

edit: Die @viewport-Regel, die diese meta-angabe dermaleinst ersetzen soll, hat noch keine Unterstützung: caniuse.com/#search=%40view

Herzliche Grüße

Matthias Scharwies

[encoder]

Handys versuchen die Webseite, die ja meist eine Breitenangabe von 100% Breite hat, auf die 2.3Zoll Breite runterzuskalieren.

Aha dann ist es also das initial-scale, das den Unterschied macht, denn ohne das würde skaliert werden? Gut das an sich ist nachvollziehbar wenn einen jemand drauf stößt.
Mein gedankliches Problem ist, die Angabe Viewportbreite=Seitenbreite ist so banal dass man sich fragt, na was'n auch sonst, was könnte denn anderes passieren wenn ich das weglasse?

die ja meist eine Breitenangabe von 100% Breite hat

Auch hier der Knoten in den Gedanken. Das sieht ja an sich nicht problematisch aus. Auch ein mobiler Browser soll die Seite doch in aller verfügbarer Breite anzeigen. Dass das ein Kriterium für eine wie Gunnar es nennt "blöde" Seite/Darstellung ist, wird einem nicht von selbst klar.

Da muss ich wohl mal den Aufwand eingehen und das alles ausprobieren.

[Auge]

Hallo

Auch hier der Knoten in den Gedanken. Das sieht ja an sich nicht problematisch aus. Auch ein mobiler Browser soll die Seite doch in aller verfügbarer Breite anzeigen. Dass das ein Kriterium für eine wie Gunnar es nennt "blöde" Seite/Darstellung ist, wird einem nicht von selbst klar.

Was Gunnar in seiner verschwurbelten Art zu sagen gedenkt, ist, dass Mobilbrowser eine nicht mit <meta name="viewport"> versehene (blöde) Seite im Desktopmodus mit interpolierten 900px Breite und damit auf einem Smartphone unleserlich und klitzeklein anzeigt. Erst mit diesem Tag samt den passenden Angaben weiß der Mobilbrowser, dass er die Seite im Mobilmodus und damit in einer (normalerweise) angemessenen Größe anzeigen soll.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Was Gunnar in seiner verschwurbelten Art zu sagen gedenkt, ist, dass Mobilbrowser eine nicht mit <meta name="viewport"> versehene (blöde) Seite im Desktopmodus mit interpolierten 900px Breite und damit auf einem Smartphone unleserlich und klitzeklein anzeigt.

Ja, fast genau das sagte ich doch. Nur mit 960.

Was war da bei „[ohne Angabe] setzen [Browser] die Breite auf 960px und verkleinern, so dass es in den Viewport passt. So erhält der Nutzer einen Überblick und kann dann in die Seite hineinzoomen“ „verschwurbelt“?

LLAP 🖖

[Auge]

Hallo

Was war da bei „[ohne Angabe] setzen [Browser] die Breite auf 960px und verkleinern, so dass es in den Viewport passt. So erhält der Nutzer einen Überblick und kann dann in die Seite hineinzoomen“ „verschwurbelt“?

Daran ist nichts verschwurbelt, aber das ist auch überhaupt nicht das, was du tatsächlich geschrieben hast. Das Letztere ist meiner Meinung nach verschwurbelt, denn es ist weit weniger verständlich als das oben aus deinem Vorposting zitierte. Für @encoder war es offensichtlich nicht einfach verständlich, wie es das sein sollte.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Daran ist nichts verschwurbelt, aber das ist auch überhaupt nicht das, was du tatsächlich geschrieben hast

Doch. Nur früher. 😉

Vielleicht hätte ich einfach nur den Link hinknallen sollen und das Zitat weglassen.

LLAP 🖖

[encoder]

Für @encoder war es offensichtlich nicht einfach verständlich, wie es das sein sollte.

Ist es auch jetzt noch nicht ganz.
Ich habe nur überall dieses Tag gefunden, ohne Erklärung. Mag jemand dazu mal ein Zahlenbeispiel machen? Vielleicht direkt im Wiki, eventuell bin ich nicht der einzige der das nicht kapiert 😀

Ich beschreibe euch mal meine Gedanken, vielleicht wird dann klar warum ich da hänge.

Definition: Der Viewport ist so breit wie das Gerät

Richtig! Was denn auch sonst? Vor allem mobile Browser sind doch auf Vollbild und somit so breit wie das Gerät.
Warum muss man das extra erwähnen?
Wie breit ists denn ohne diese Angabe?

Darauf dass ein mobiler Browser eine feste Seitenbreite annimmt, kommt man von selbst ja nicht. Auch nicht auf das was er mit dieser Seitenbreite alles anstellt.

Definition: Skalierung = keine

Scheinbar wird ohne diese Angabe also skaliert. Wie? Auf welchen Grundlagen?
Was ist für den Browser die nicht-skalierte Welt, welche Angaben legt er dann zugrunde?

Der Browser nimmt also eine für die Auflösung passende Schriftgröße. Die sind 100%?
Was wäre auf einem mobilen Gerät das gerade diese fixe fiktive Breite besitzt, ist da dann auch ein Unterschied festzustellen?

[Rolf B]

Hallo encoder,

Darauf dass ein mobiler Browser eine feste Seitenbreite annimmt, kommt man von selbst ja nicht.

Naja, das ist eben das Erbe der Desktop-Welt. Wer seine Webseiten nur für Desktop-Browser denkt, baut sie für große Bildschirme und vergisst die kleinen Viewports. Browser neigen dazu, Webdesigner mit veralteten Kenntnissen einzukalkulieren, und faken deshalb den "vergesslichen" Seiten den Desktop vor, damit sie sich wohlfühlen.

Diese Seiten merken nichts davon, sollen es auch nicht merken, denn mit 960px Breite sind die allermeisten auf Desktop ausgelegten Webseiten prima zufrieden. Ihre User nicht, sie müssen wild herumzoomen, aber zumindest fällt die Seite nicht auseinander.

960px kommt daher, dass das über lange Jahre als body-Breite empfohlen wurde. Mit etwas Platz für Margin sind es dann die 980px.

MDN schreibt eine Menge darüber

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wer seine Webseiten nur für Desktop-Browser denkt, baut sie für große Bildschirme und vergisst die kleinen Viewports. Browser neigen dazu, Webdesigner mit veralteten Kenntnissen einzukalkulieren …

Wer seine Webseiten nur für große Bildschirme denkt, den würde ich nicht als „Webdesigner mit veralteten Kenntnissen“ bezeichnen, sondern gar nicht als Webdesigner.

Schon zu Anfangszeiten des Webs gab es verschieden große Bildschirme und „optimieren“ auf eine bestimmte Größe war unsinnig.

LLAP 🖖

[Gunnar Bittersmann]

@@encoder

Ich habe nur überall dieses Tag gefunden, ohne Erklärung. Mag jemand dazu mal ein Zahlenbeispiel machen?

Responsive Seite – Tag einbauen. Das ist die ganze Erklärung. Da gibt es nichts zu rechnen.

Der Viewport ist so breit wie das Gerät […] Warum muss man das extra erwähnen?

Das hatte ich doch lang und breit erklärt. Bist du dem Link nicht gefolgt?

LLAP 🖖

[encoder]

Tagchen

Der Viewport ist so breit wie das Gerät […] Warum muss man das extra erwähnen?
Das hatte ich doch lang und breit erklärt. Bist du dem Link nicht gefolgt?

Doch schon. So ähnlich steht es im Wiki ja auch. Nur was es genau bedeutet wenn die Seite auf "960 Pixel gesetzt wird" war mir lange nicht klar. Das was da passiert hätte ich nicht vermutet und somit auch nicht als die Lösung meiner Gedankenknoten angesehen.

Inzwischen hab ich es verstanden. Meine Aussagen sollten nochmal verdeutlichen warum ich lange nicht darauf gekommen bin was gemeint ist.

[Gunnar Bittersmann]

@@encoder

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Erklärung: Seite passt sich an den Vierport an und ermöglicht Skalieren.

Allerdings fehlt mir die Erklärung.

Erklärung: „[Blöde] Seiten haben keinerlei Kennzeichnung, dass sie blöd sind. […] [Deshalb] muss man [nicht blöde Seiten] kenntlich machen – mit einer meta-viewport-Angabe.“ —yours truly

LLAP 🖖

[Rolf B]

Hallo Gunnar,

[Blöde] Seiten haben keinerlei Kennzeichnung, dass sie blöd sind.

Dunning-Kruger-Webseiten?

Rolf