Was ist das Ansichtsfenster?
Das Ansichtsfenster ist der sichtbare Bereich einer Web-Seite des Benutzers.
Das Ansichtsfenster ändert sich mit dem Gerät und wird auf einem Handy kleiner sein als auf einem Computerbildschirm.
Bevor Tabletten und Mobiltelefone wurden Webseiten ausschließlich für Computer-Bildschirme, und es war üblich, für Web-Seiten ein statisches Design zu haben und eine feste Größe.
Dann, wenn wir das Surfen im Internet mit Tabletten und Mobiltelefone gestartet, feste Größe Web-Seiten waren zu groß, um das Ansichtsfenster zu passen. Um dies zu beheben, Browser auf jene der gesamten Webseite skaliert Geräte bis auf den Bildschirm passen.
Das war nicht perfekt !! Aber eine schnelle Lösung.
Einstellung Die Ansichtsfenster
HTML5 eingeführt , ein Verfahren zur Web - Designer übernehmen die Kontrolle über das Bildfenster lassen, durch das <meta> -Tag.
Sie sollten die folgenden Angaben enthalten <meta> Darstellungselement in allen Ihren Webseiten:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> Darstellungselement gibt den Browser Anweisungen, wie die Seite Dimensionen und Skalierung zu steuern.
Die width=device-width Teil setzt die Breite der Seite , um die Bildschirmbreite des Geräts zu folgen (die auf dem Gerät variieren je).
Die initial-scale=1.0 Teil legt die anfängliche Zoomstufe , wenn die Seite zum ersten Mal durch den Browser geladen wird.
Hier ist ein Beispiel einer Webseite , ohne die Darstellungs Meta - Tag, und der Web - Seite mit dem Darstellungs Meta - Tag:
Tipp: Wenn Sie diese Seite mit einem Telefon oder einem Tablet surfen, können Sie sich auf den beiden Links klicken , um den Unterschied zu sehen.
Größe Inhalt an das Ansichtsfenster
Die Benutzer werden verwendet, um Websites sowohl vertikal als auch auf Desktop-und mobile Geräte zu bewegen - aber nicht horizontal!
Also, wenn der Benutzer horizontal scrollen gezwungen wird, oder verkleinern, um zu sehen, die gesamte Web-Seite in einem schlechten Nutzererfahrung.
Einige zusätzliche Regeln zu beachten:
1. NICHT große feste Breite Elemente Verwenden Sie - zum Beispiel, wenn ein Bild mit einer Breite , die breiter ist als die Ansicht angezeigt wird das Ansichtsfenster horizontal zu scrollen verursachen können. Denken Sie daran, diese Inhalte einzustellen innerhalb der Breite des Ansichtsfensters zu passen.
2. Lassen Sie sich nicht der Inhalt auf einem bestimmten Darstellungsbreite verlassen gut zu machen - Da Bildschirmabmessungen und Breite in Pixel in CSS erhebliche Unterschiede zwischen den Geräten variieren, Inhalt sollte auf einem bestimmten Darstellungsbreite nicht darauf verlassen , gut zu machen.
Einstellen große absolute CSS Breiten für Seitenelemente, führt dazu , dass das Element zu breit auf einem kleineren Gerät für das Ansichtsfenster zu sein - 3. Verwenden Sie CSS Media Queries verschiedene Styling für kleine und große Bildschirme anzuwenden. Stattdessen betrachten relative Breite Werten, wie Breite: 100%. Seien Sie auch vorsichtig große absolute Positionswerte zu verwenden. Es kann bewirken, dass das Element aus dem Bildfenster auf kleinen Geräten zu fallen.