Was ist ein Ansichtsfenster in HTML?

73

Was ist ein Ansichtsfenster in HTML? Können Sie einige Beispiele für den Zugriff auf die Ansichtsfensterdetails geben?

javascript html viewport

— minil
quelle

4

Als zusätzliche Information: Hier ist ein Artikel mit einem schönen Bild Messen des Ansichtsfensters .

— informatik01

1

Was meinen Sie mit "Geben Sie einige Beispiele für den Zugriff auf die Ansichtsfensterdetails?"

— Coleman

w3schools.com/css/css_rwd_viewport.asp

— Davut Gürbüz

75

Das Ansichtsfenster ist der Teil der Webseite, den der Benutzer derzeit sehen kann. Die Bildlaufleisten verschieben das Ansichtsfenster, um andere Teile der Seite anzuzeigen.

Befolgen Sie die Anweisungen dieses Artikels, um die Abmessungen des Ansichtsfensters in Javascript abzurufen .

if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }

— Matchu
quelle

24

Und um Verwirrung zu vermeiden, ist es weder die Größe der Fenster Ihres Browsers noch die Bildschirmauflösung. Bei gleicher Fenstergröße hat ein Browser mit mehr angezeigten Symbolleisten ein kleineres Ansichtsfenster.

— FelipeAls

Durch Anwenden transform: translate3d(0,0,0)auf ein Element wird es zu einem Ansichtsfenster für alle untergeordneten Elemente. Das macht diese Antwort teilweise falsch.

— Tao

In welcher Beziehung steht das Ansichtsfenster zu den Bildlaufleisten? Enthält es sie oder nicht oder hängt es vom Browser ab?

— Paul Razvan Berg

12

Ich denke, das ViewPortist nur ein Bereich, um den Webinhalt im Browser anzuzeigen. Und verschiedene Browser haben ihre eigene Einstellung für die Größe von ViewPort. Beispielsweise ViewPortbeträgt die Standardbreite von Safari 980 Pixel. Wenn die tatsächliche Webseite, die Sie sehen möchten, kleiner als 980 Pixel ist, sollte beim Zugriff auf die Webseite in der Safari standardmäßig ein leerer Anzeigebereich in der Safari vorhanden sein. Aus diesem Grund müssen wir manchmal die ViewPortAnzeige für Webinhalte im Browser konfigurieren .

Wie unten zum Beispiel:

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

Und bitte lesen Sie auch die Antwort von Paulus . Ich denke, er hat bereits die Verwendung von erklärt ViewPort.

— Joe.wang
quelle

8

Das Ansichtsfenster ist ein virtueller Bereich, der von der Browser-Rendering-Engine verwendet wird, um zu bestimmen, wie Inhalte beim ersten Rendern auf dem aktuellen Bildschirm skaliert und in der Größe angepasst werden. Das wird dir helfen:

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

— vicky
quelle

0

Das Ansichtsfenster ist der visuelle Bereich Ihrer Webseite in einem Browser. Mithilfe von <meta name="viewport"können Sie festlegen, wie der Inhalt Ihrer Website auf verschiedenen Geräten gerendert wird. Persönlich benutze ich gerne: <meta name="viewport" content="width=device-width, initial-scale=1.0>

— aditya
quelle

0

Der Ansichtsfensterbereich ist der vom Benutzer sichtbare Bereich auf dem Gerät. Mit dem Meta-Tag wird die Breite des Seiteninhalts gemäß dem Ansichtsfenster festgelegt, sodass der Inhalt der Seite gemäß der Breite des Ansichtsfensters verkleinert oder vergrößert wird. Eine gute Erklärung bei MDN [https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag].

— Manoj
quelle