2010-05-30 7 views
53

Was ist Ansichtsfenster in HTML? Können Sie einige Beispiele dazu geben, wie Sie auf die Details des Ansichtsfensters zugreifen können?Was ist Ansichtsfenster in HTML?

+2

Als weitere Informationen: hier ein Artikel mit einem schönen Bild ist [Messung der Ansichtsfenster] (http://www.quirksmode.org/mobile/viewports.html# link12). – informatik01

+0

Was meinen Sie mit "Geben Sie einige Beispiele, um auf die Ansichtsfensterdetails zuzugreifen?" – Coleman

+0

http://www.w3schools.com/css/css_rwd_viewport.asp –

Antwort

54

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

Follow this article's instructions to get the viewport dimensions in Javascript.

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

Und um jede 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 Symbolleisten ein kleineres Ansichtsfenster. – FelipeAls

4

Das Ansichtsfenster ist ein virtueller Bereich durch den Browser-Rendering-Engine verwendet, um zu bestimmen, wie Inhalte skaliert und dimensioniert sind, wenn es anfänglich auf dem aktuellen Bildschirm wiedergegeben wird. Dies wird Ihnen helfen:

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

8

Ich denke, die ViewPort ist nur ein Bereich, der die Web-Inhalte im Browser angezeigt werden soll. Und verschiedene Browser haben ihre eigene Einstellung für die Größe von ViewPort. Beispielsweise ist die Standardbreite ViewPort Safari 980 Pixel. Wenn also die tatsächliche Webseite, die Sie sehen möchten, kleiner als 980 Pixel ist, sollte in Safari ein leerer Anzeigebereich vorhanden sein, wenn Sie in Safari standardmäßig auf die Webseite zugreifen. Daher müssen wir manchmal die ViewPort für eine bessere Web-Content-Anzeige im Browser konfigurieren.

Wie unten, zum Beispiel:

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

Und bitte auch Paul's answer lesen. Ich denke, er hat bereits die Verwendung von ViewPort erklärt.

0

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

1

Das Ansichtsfenster ist der sichtbare Bereich des Benutzers einer Webseite.

Das Ansichtsfenster variiert von Gerät zu Gerät, ein Mobiltelefon hat ein kleineres Ansichtsfenster als ein Computerbildschirm.

Bevor Tablets und Mobiltelefone nicht auf dem Markt waren, wurden Webseiten nur für Computerbildschirme entworfen, und es war üblich, dass Webseiten ein statisches Design und eine feste Größe hatten.

Als dann Leute mit Tablets und Mobiltelefonen im Internet surften, waren Webseiten fester Größe zu groß, um in das Ansichtsfenster zu passen. Um dieses Problem zu beheben, führte Mobile Safari das "Viewport-Meta-Tag" (safari documentation) ein, damit Webentwickler die Größe und Skalierung des Ansichtsfensters steuern können. Viele andere mobile Browser unterstützen dieses Tag jetzt, obwohl es nicht Teil eines Webstandards ist.

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

Dies wird der Browser so einstellen, um die Breite des Inhalts auf die Breite des Gerätes selbst erzählen und dass der Inhalt auf 1 auf Last zu skalieren.

Erfahren Sie mehr über Darstellungsform hier: http://fend-tricks.com/responsive-web-design-with-viewport/

Verwandte Themen