Viewport-Definition | phoenixNAP IT-Glossar

Ein Ansichtsbereich bezieht sich auf den sichtbaren Bereich, über den Benutzer mit Inhalten auf einem Anzeigegerät oder innerhalb einer Softwareanwendung interagieren. Das Konzept ist in verschiedenen Bereichen üblich, darunter Webdesign, Computergrafik usw virtuellen Realität.

So legen Sie das Ansichtsfenster fest

Ansichtsfenster werden je nach unterschiedlich eingerichtet Programmiersprache.

So legen Sie den Ansichtsbereich in HTML fest

Einstellen des Ansichtsfensters HTML ist entscheidend für die Erstellung responsiver Webdesigns, die sich gut an verschiedene Bildschirmgrößen anpassen, insbesondere auf Mobilgeräten. Dies wird typischerweise durch die Verwendung erreicht Tag innerhalb Ihres HTML-Dokuments Abschnitt. Der Ansichtsfenster Das Meta-Tag weist den Browser an, wie er die Abmessungen und die Skalierung der Seite steuern soll.

Hier ist eine grundlegende Anleitung zum Festlegen des Ansichtsbereichs in einem HTML-Dokument:

Verwenden Sie das Viewport-Meta-Tag

Innerhalb der Fügen Sie im Abschnitt Ihres HTML-Codes Folgendes ein Ziel tag:

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

Aufschlüsselung der Ansichtsfenster-Meta-Tag-Attribute

name="Ansichtsfenster": Dieses Attribut gibt an, dass das Meta-Tag Optionen für das Ansichtsfenster festlegt.
content="width=Gerätebreite": Dadurch wird die Breite des Ansichtsfensters so eingestellt, dass sie mit der Bildschirmbreite des Geräts übereinstimmt. Dadurch wird sichergestellt, dass die Seite zum Rendern die tatsächliche Gerätebreite verwendet, was für ein responsives Design unerlässlich ist.
content="initial-scale=1.0": Dies steuert die anfängliche Zoomstufe, wenn die Seite zum ersten Mal geladen wird. Durch die Einstellung 1.0 wird sichergestellt, dass die Seite im Maßstab 1:1 ohne Zoom angezeigt wird.

Basics

Minimalmaßstab und Maximalmaßstab: Diese Attribute definieren die minimale bzw. maximale Zoomstufe, die der Benutzer erreichen kann. Zum Beispiel, Mindestmaßstab = 1.0 und maximale Skala = 5.0.
vom Benutzer skalierbar: Dies kann eingestellt werden ja or nicht (oder 1 or 0), um dem Benutzer das Skalieren (Zoomen) der Webseite zu erlauben oder zu verbieten. Zum Beispiel, Benutzerskalierbar=Nein verhindert das Zoomen, was bei bestimmten Designs nützlich sein kann, aber auch die Zugänglichkeit beeinträchtigen kann.

Vollständiges Beispiel

So können Sie einen Ansichtsbereich in einem HTML-Dokument mit zusätzlichen Optionen festlegen:

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
</head>
<body>

    <h1>Hello, World!</h1>
    <p>This is a responsive webpage.</p>

</body>
</html>

Dinge zu erinnern,

Gleichzeitig wird die Fähigkeit der Benutzer zum Zoomen eingeschränkt Benutzerskalierbar=Nein oder indem Sie streng festlegen maximaler Maßstab Da dies zur Konsistenz des Designs beiträgt, wird im Allgemeinen empfohlen, die Zoombeschränkung zu vermeiden, um sicherzustellen, dass Menschen mit Sehbehinderungen Ihre Website weiterhin effektiv nutzen können.

Nachdem Sie den Darstellungsbereich festgelegt haben, testen Sie Ihre Webseite auf verschiedenen Geräten und Bildschirmgrößen, um sicherzustellen, dass sich Layout und Skalierung wie erwartet verhalten.

So legen Sie den Ansichtsbereich in CSS fest

Einstellen des Ansichtsfensters CSS beinhaltet nicht direkt eine „Ansichtsfenster“-Einstellung, da es sich bei dem Ansichtsfenster grundsätzlich um ein HTML- und Browser-Konzept handelt, das hauptsächlich über verwaltet wird <meta name="viewport"> Tag in HTML. CSS spielt jedoch eine entscheidende Rolle bei der Erstellung responsiver Designs, die sich über Medienabfragen an die Größe des Ansichtsfensters anpassen. flexFlexible Layouts und skalierbare Einheiten.

Key Concepts

Verwenden Sie die folgenden CSS-Techniken, um Designs reaktionsfähig und an jede Ansichtsfenstergröße anpassbar zu machen:

Medien-Anfragen. Medienabfragen sind der Grundstein des responsiven Designs in CSS. Sie ermöglichen die Anwendung von Stilen basierend auf der Breite, Höhe, Ausrichtung und anderen Merkmalen des Ansichtsfensters. Die folgende Medienabfrage wendet eine Hintergrundfarbe auf den Körper an, wenn die Breite des Ansichtsfensters 600 Pixel oder weniger beträgt, was normalerweise auf ein mobiles Gerät hinweist.

@media (max-width: 600px) {

  body {

    background-color: lightblue;

  }

}

FlexMögliche Layouts. Die richtigen flexFlexible Breiten und Höhen statt fester Größen sorgen dafür, dass sich Ihr Layout an das Ansichtsfenster anpasst. Sie können Prozentsätze, vw (Ansichtsfensterbreite), vh (Ansichtsfensterhöhe) und andere relative Einheiten verwenden, um Abmessungen zu definieren. Dieses Beispiel zeigt, wie der Container 80 % der Breite des Ansichtsfensters einnimmt und sich automatisch anpasst, wenn sich die Größe des Ansichtsfensters ändert.

.container {

  width: 80%;

  margin: auto;

}

Flexible Bilder und Medien. Um zu verhindern, dass Bilder und Videos die Breite des Ansichtsfensters überschreiten und Ihr Layout beschädigen, erstellen Sie sie flexibel. Der folgende Code stellt sicher, dass Bilder und Videos auf die Breite ihres enthaltenden Elements verkleinert und auf ihre Originalgröße gebracht werden.

img, video {

  max-width: 100%;

  height: auto;

}

Ansichtsfenstereinheiten. CSS bietet ansichtsfensterbezogene Einheiten, einschließlich vw (Breite des Ansichtsfensters), vh (Höhe des Ansichtsfensters), vmin (das kleinere von vw oder vh) und vmax (das größere von vw oder vh). Diese können nützlich sein, um Elemente zu erstellen, die dynamisch mit dem Ansichtsfenster skaliert werden.

.hero {

  height: 50vh; /* 50% of the viewport height */

  font-size: 4vw; /* font size scales with the viewport width */

}

CSS-Raster und FlexBox. CSS-Raster und FlexBox sind leistungsstarke Layoutmodelle, die Folgendes bieten flexMögliche Möglichkeiten, reaktionsfähige Schnittstellen zu entwerfen, ohne Floats und Positionierung verwenden zu müssen. Flexbox ist ideal für Layouts in einer Dimension, entweder in einer Zeile oder einer Spalte. Durch dieses Rasterlayout können Elemente nach Bedarf in neue Zeilen umgebrochen und an die Größe des Ansichtsfensters angepasst werden.

.flex-container {

  display: flex;

  justify-content: space-around;

}

CSS Grid excels at two-dimensional layouts, managing both rows and columns.

<strong><code>

.grid-container {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

}

Viewport und SEO

Die Ansichtsfenstereinstellung spielt bei der Suchmaschinenoptimierung eine entscheidende Rolle, da sie sich direkt auf das Benutzererlebnis auf verschiedenen Geräten, insbesondere auf Mobilgeräten, auswirkt. Suchmaschinen wie Google legen großen Wert auf Mobilfreundlichkeit als Rankingfaktor und erkennen den wachsenden Trend zum Surfen im Internet auf mobilen Geräten.

Wenn eine Website mit einer responsiven Ansichtsfenstereinstellung gestaltet wird, stellt sie sicher, dass der Inhalt richtig skaliert und an verschiedene Bildschirmgrößen angepasst wird, vom Desktop bis zum Smartphone. Diese Reaktionsfähigkeit verbessert die Benutzerinteraktion, indem sie ein nahtloses Surferlebnis bietet, die Absprungraten reduziert und die auf der Website verbrachte Zeit erhöht. Folglich werden Websites, die für mobile Geräte mit entsprechenden Darstellungsfenstereinstellungen optimiert sind, wahrscheinlich einen höheren Rang auf den Ergebnisseiten von Suchmaschinen (SERPs) erreichen.

Darüber hinaus verwenden Google und andere Suchmaschinen die Mobile-First-Indexierung, d. h. sie nutzen überwiegend die mobile Version des Inhalts für die Indexierung und das Ranking. Ein gut konfigurierter Ansichtsbereich ist hierfür unerlässlich, da er dem Browser mitteilt, wie er mit der Skalierung und Darstellung auf kleineren Bildschirmen umgehen soll. Wenn der Darstellungsbereich einer Website nicht richtig eingestellt ist, kann es sein, dass sie auf mobilen Geräten nicht gut dargestellt wird, was zu einer schlechten Benutzererfahrung führt, die sich negativ auf die SEO einer Website auswirkt

Best Practices für Ansichtsfenster

Die Einhaltung der Best Practices für Ansichtsfenster ist für die Erstellung reaktionsfähiger, benutzerfreundlicher Websites, die auf einer Vielzahl von Geräten gut funktionieren, von entscheidender Bedeutung. Hier sind einige wichtige Best Practices, die Sie berücksichtigen sollten.

1. Verwenden Sie das Viewport-Meta-Tag

Fügen Sie immer das Viewport-Meta-Tag in das ein Abschnitt Ihrer HTML-Dokumente, um die Größe und Skalierung des Ansichtsfensters auf verschiedenen Geräten zu steuern. Dieses Tag stellt sicher, dass Ihre Website auf allen Geräten korrekt angezeigt wird, indem die Breite des Darstellungsfensters an die Breite des Geräts angepasst wird und der anfängliche Maßstab auf 1 eingestellt wird.

2. Stellen Sie sicher, dass der Inhalt nicht breiter als der Bildschirm ist

Gestalten Sie Ihr Layout und Ihren Inhalt so, dass horizontales Scrollen vermieden wird. Verwenden Sie CSS-Medienabfragen, um das Layout Ihrer Website an die Grenzen verschiedener Bildschirmgrößen anzupassen. Inhalte, die über den Bildschirmrand hinausragen, führen zu einer schlechten Benutzererfahrung, beeinträchtigen die Mobilfreundlichkeitsbewertung Ihrer Website und wirken sich negativ auf die Suchmaschinenoptimierung aus.

3. Responsive Design-Techniken verwenden

Nutzen flexMit flexiblen Rasterlayouts, Bildern und CSS-Medienabfragen können Sie ein responsives Design erstellen, das sich an das Gerät des Benutzers anpasst. Responsive Design stellt sicher, dass Ihre Website mit einem Minimum an Größenänderung, Schwenken und Scrollen einfach zu lesen und zu navigieren ist.

4. Verfolgen Sie einen Mobile-First-Ansatz

Entwerfen Sie Ihre Website zunächst für mobile Geräte und skalieren Sie sie dann auf größere Bildschirme. Dabei geht es darum, Inhalte und Funktionen zu priorisieren, die für mobile Nutzer wichtig sind. Ein Mobile-First-Ansatz entspricht der Art und Weise, wie die Mehrheit der Benutzer heute auf das Internet zugreift, und den Mobile-First-Indexierungspraktiken der Suchmaschinen.

5. Optimieren Sie für Touch-Interaktionen

Designelemente wie Schaltflächen und Links sollten leicht antippbar sein und über eine angemessene Größe und Abstände verfügen, um versehentliches Tippen zu verhindern. Die Touch-Optimierung verbessert die Benutzerfreundlichkeit Ihrer Website auf Touchscreen-Geräten und steigert so das allgemeine Benutzererlebnis und die Interaktion.

6. Aktivieren Sie bei Bedarf den Zoom

Während es üblich ist, zu setzen Benutzerskalierbar=Nein Um die Skalierung des Ansichtsfensters bei einigen Webanwendungen zu sperren, sollten Sie erwägen, den Zoom auf inhaltsreichen Seiten zuzulassen. Benutzer müssen möglicherweise hineinzoomen, um Text oder Bilder bequemer anzeigen zu können, insbesondere auf Geräten mit kleinen Bildschirmen. Durch das Zulassen von Zoom können die Zugänglichkeit und die Benutzerzufriedenheit verbessert werden.

7. Testen Sie geräte- und browserübergreifend

Testen Sie regelmäßig die Reaktionsfähigkeit und Leistung Ihrer Website auf verschiedenen Geräten und Browsern, um die Kompatibilität sicherzustellen. Verschiedene Geräte und Browser stellen Ihre Website möglicherweise leicht unterschiedlich dar. Tests helfen dabei, Probleme zu erkennen und zu beheben und sorgen so für ein konsistentes und positives Benutzererlebnis für alle Besucher.