Diskussion:Hauptseite

Aus mmp-netzwissen
Wechseln zu: Navigation, Suche

Viewport

Viewport ist der sichtbare Bereich einer Webseite auf einem mobilen Endgerät und kommt zur Anwendung, sobald eine Webseite optimal skaliert auf mobilen Geräten angezeigt werden soll. Folgedessen muss der Inhalt für beispielsweise ein iPhone kleiner angezeigt werden.


Problematik der mobilen Endgeräte

Spätestens seit dem Moment als die ersten Smartphones auf den Markt gekommen sind, wurden die Programmierer von Webseiten zum umdenken gezwungen. Internetzugang auf Mobile Devices hat den Useren eine neue Welt des surfens hervorgebracht. Dank diesem technischen Meilenstein sind Webseiten beinahe überall abrufbar, wenn der mobile Internetzugang gewährleistet ist. Doch diese technische Errungenschaft bringt auch neue Probleme, die gelöst werden müssen. Eines der grössten Probleme besteht darin, dass Smartphones aller Art einen teilweise massiven Grössenunterschied zu einem Desktop PC aufweisen. Dadurch werden Webseiten, welche explizit für Desktopbildschirme entwickelt wurden, auf Smartphones sehr klein und unleserlich angezeigt. Die Webseite wird durch den Grössenunterschied auf den Bildschirm des Smartphones angepasst und ist teilweise kaum noch zu lesen wenn man nicht zoomt und sich durch die ganze Seite scrollt. Dieses Problem ist auf die Grösse des mobilen Viewport zurück zu führen, welcher für sämtliche mobilen Geräte zu gross ist.

Um die Problematik zu veranschaulichen werden hier die Safari-Viewportgrösse mit der iPhone Screengrösse verglichen. Der Safari hat einen Viewport mit der Grösse 980px. Das iPhone 6s hat zwar in der Portraitansicht eine Breite von 750px und ist somit nicht wirklich viel kleiner als der Viewport selbst. Dieses Problem des Responsive Webdesign kann mit dem Viewport-Meta-Tag oder der CSS-Regel behoben werden.

Bild das die Problematik bildlich erklärt (wird noch eingefügt)


Anwendung

Viewport-Meta-Tag

Diese Variante der Problemlösung wurde von Apple entwickelt und wurde schnell von anderen Plattformen angenommen. Der Viewport-Meta-Tag informiert den Browser darüber, wie die Grösse der Webseite und die Skalierung gesteuert werden. Dieser Tag muss im <header> des HTML-Dokuments platziert werden. Dies sieht im <header> folgendermassen aus:

<meta name=“viewport“ content=““>


Fester Darstellungsbereich

Nun gibt es verschiedene Möglichkeiten wie man den sogenannten Darstellungsbereich in diesem Tag definieren kann. Einerseits kann die Breite fix definiert werden. Davon wird jedoch abgeraten weil nicht jedes Gerät die selbe Auflösung hat. Der fix definierte Wert dient aber als gute Notlösung. Anhand des oben genannten Beispiels würde im Tag so der Wert “width=750“ eingetragen werden.

<meta name=“viewport“ content=“width=750“>


Flexibler Darstellungsbereich

Wenn ein flexibler Darstellungsbereich verwendet wird, kann der Wert “width=device-width“ benutzt werden. Dadurch wird die Webseite in geräteunabhängige Pixel angepasst und sorgt dafür, dass die Webseite auf die Grösse des Smartphonedisplays passt. Bei einigen Browsern, einschliesslich iPhone und Windows Phone, wird beim Drehen des Geräts ins Querformat die Seite wieder nur ran gezoomt und nicht wie in der Portrairtansicht angepasst. Um dies zu verhindern muss dem Meta-Tag noch ein zusätzliches Attribut hinzugefügt werden. Mit dem Attribut “initial-scale=1“ wird dem Browser angegeben, dass er eine 1:1-Bezeihung zwischen CSS-Pixeln und geräteunabhängigen Pixeln herzustellen, egal ob das Smartphone nun hochkant oder quer gehalten wird. Dadurch kann die Seite die gesammte Breite des Querformats nutzen.

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

Um die Webseiten sauber in Hoch- und Querformat anzeigen zu können, muss sichergestellt werden, dass die Webseite so gestaltet wird damit sie in beiden Formaten optimal funktioniert.

Des weiteren können in diesem Meta-Tag auch definiert werden, wie viel und ob der User auf der Seite überhaupt zoomen kann oder nicht. Obwohl es diese Möglichkeit gibt, raten Programmierer davon ab diese Attribute zu verwenden da sie die Zugänglichkeit der Webseite beeinträchtigt.


@viewport CSS-Regel

Von der Schreibweise her unterscheiden sich der Meta-Tag und die CSS-Regel nicht gross voneinander. Die @viewport-Regel kann irgendwo im CSS-Formular eingefügt werden, es wird aber dringend geraten sie vor die Media Queries an den Anfang des Formulars zu setzen.

Fester Darstellungsbereich

Wie die Meta-Tag Variante lässt sich die @viewport-Regel in eine fixen und einen flexiblen Darstellungsbereich unterteilen. Dabei unterscheidet sich hier gegenüber des Meta-Tag, dass bei der Angabe der Weite an den Wert noch das Kürzel für Pixel angehängt wird. Der folgende Code ist somit auf eine Fixbreite von 750 Pixel definiert.

@viewport {
    width: 750px;
}


Flexibler Darstellungsbereich

Wie auch schon beim Meta-Tag wird hier als Wert device-width verwendet, um die Webeite anzupassen. Zoom entspricht in der @viewport-Regel dem “initial-scale=1“ in der Meta-Tag-Variante.

@viewport {
   width: device-width;
   zoom: 1;
}

Auch bei der @viewport-Regel ist es möglich den Zoom zu definieren aber auch hier wird davon abgeraten.

Da diese CSS-Regel für den Viewport zwar in vielen Fällen unterstützt wird gehört sie aber nicht zum Standart. Deshalb raten Programmierer eher dazu die Meta-Tag-Variante zu verwenden.


Nutzen für MMP Studenten

Da die Generation Y in der heutigen Zeit mehrheitlich auf mobilen Endgeräten surft, ist auf eine mobile Darstellung einer Webseite nicht mehr zu verzichten. MMP Studenten wird daher empfohlen, den Viewport-Meta-Tag in jede Webseite einzubinden.

Quellen

http://www.mediaevent.de/css/viewport-mobile.html http://www.lynda.com/Web-Responsive-Design-tutorials/Examining-mobile-viewport/104969/115619-4.html https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html