Was ist ein Viewpoint und wie benutzt man dieses ?

Konfigurieren des Ansichtsfensters

Safari unter iOS zeigt Webseiten in einem Maßstab an, der für die meisten Webinhalte geeignet ist, die ursprünglich für den Desktop entwickelt wurden. Wenn diese Standardeinstellungen für Ihre Webseiten nicht funktionieren, wird dringend empfohlen, dass Sie die Einstellungen ändern, indem Sie das Ansichtsfenster konfigurieren. Sie müssen das Ansichtsfenster insbesondere konfigurieren, wenn Sie Webseiten speziell für iOS entwerfen. Das Konfigurieren des Ansichtsfensters ist einfach - fügen Sie einfach eine HTML-Zeile zu Ihrer Webseite hinzu. Die Auswirkungen der Eigenschaften des Ansichtsfensters auf die Darstellung Ihrer Webseiten unter iOS sind jedoch komplexer. Bevor Sie das Ansichtsfenster konfigurieren, benötigen Sie ein tieferes Verständnis für den sichtbaren Bereich und das Ansichtsfenster unter iOS. Wenn Sie mit dem Ansichtsfenster unter iOS bereits vertraut sind, lesen Sie den Abschnitt Viewport- Meta-Tag. Dort finden Sie weitere Informationen zum Viewport-Tag und Viewport-Einstellungen für Webanwendungen für Webanwendungstipps. Ansonsten lesen Sie die Abschnitte in diesem Kapitel in der folgenden Reihenfolge: Lesen Sie Safari unter iOS Viewport , um mehr über den verfügbaren Bildschirmbereich für Webseiten auf kleinen Geräten zu erfahren. Lesen Sie, was das Ansichtsfenster ist. für ein tieferes Verständnis des Darstellungsbereichs auf iOS. Lesen Sie die Standardeinstellungen für das Ansichtsfenster und verwenden Sie das Viewport-Meta-Tag, um das Viewport-Meta-Tag zu verwenden. Lesen Sie Ändern der Breite und Höhe des Ansichtsfensters und der Art und Weise, wie Safari Breite, Höhe und anfängliche Skalierung ändert , um besser zu verstehen, wie sich die Eigenschaften des Ansichtsfensters auf die Darstellung von Webseiten unter iOS auswirken . Lesen Sie Viewport-Einstellungen für Webanwendungen, wenn Sie eine Webanwendung für iOS entwerfen. Eine vollständige Beschreibung des Viewport-Meta-Tags finden Sie unter Unterstützte Metatags.

Was ist der Viewport?

Der Darstellungsbereich auf dem Desktop und der Darstellungsbereich unter iOS unterscheiden sich geringfügig. Safari unter iOS hat keine Fenster, Bildlaufleisten oder Schaltflächen zur Größenänderung, wie rechts in Abbildung 3-1 dargestellt . Der Benutzer schwenkt mit dem Finger. Der Benutzer vergrößert sich durch doppeltes Tippen und Öffnen, und verkleinert sich durch Schließen, dh Gesten, die auf dem Desktop für Safari nicht verfügbar sind. Aufgrund der unterschiedlichen Interaktion der Benutzer mit Webinhalten sind die Darstellungsbereiche auf dem Desktop und unter iOS nicht identisch. Beachten Sie, dass diese Unterschiede zwischen den Ansichtsfenstern einige HTML- und CSS-Anweisungen unter iOS betreffen können. Abbildung 3-1 Unterschiede zwischen Safari unter iOS und Safari auf dem Desktop

Safari auf dem Desktop Viewport

Der Darstellungsbereich auf dem Desktop ist der sichtbare Bereich der Webseite (siehe Abbildung 3-2) . Der Benutzer ändert die Größe des Ansichtsfensters, indem er die Größe des Fensters ändert. Wenn die Webseite größer als das Ansichtsfenster ist, blättert der Benutzer, um mehr von der Webseite zu sehen. Wenn die Größe des Ansichtsfensters geändert wird, ändert Safari möglicherweise das Layout des Dokuments. Erweitern oder verkleinern Sie beispielsweise die Breite des Texts. Wenn die Webseite kleiner als das Ansichtsfenster ist, wird sie mit Leerzeichen gefüllt, um sie an die Größe des Ansichtsfensters anzupassen. Abbildung 3-2 Safari im Desktop-Ansichtsfenster

Safari unter iOS Viewport

Bei Safari unter iOS ist der Darstellungsbereich der Bereich, der bestimmt, wie Inhalte angeordnet werden und wo Text auf der Webseite eingebettet wird. Das Ansichtsfenster kann größer oder kleiner als der sichtbare Bereich sein. Wenn der Benutzer eine Webseite unter iOS schwenkt, werden graue Balken auf der rechten und unteren Seite des Bildschirms als visuelle Rückmeldung angezeigt, um dem Benutzer die Größe des sichtbaren Bereichs im Vergleich zum Ansichtsfenster anzuzeigen (ähnlich der Länge der Bildlaufleisten auf dem Desktop) ). Mit den doppelten Antippen, Drücken und Schließen von Gesten können Benutzer die Skalierung des Ansichtsfensters ändern, nicht jedoch die Größe. Die einzige Ausnahme ist, wenn der Benutzer von Hochformat zu Querformat wechselt. Unter bestimmten Umständen kann Safari unter iOS die Breite und Höhe des Darstellungsbereichs anpassen und folglich das Webseitenlayout ändern. Sie können die Größe des Darstellungsbereichs und andere Eigenschaften Ihrer Webseite festlegen. Meistens tun Sie dies, um die Präsentation zu verbessern, wenn iOS die Webseite zum ersten Mal darstellt.

Standard-Ansichtsfenster-Einstellungen

Bei Safari unter iOS werden Größe und Skalierung des Ansichtsfensters auf vernünftige Standardwerte gesetzt, die für die meisten Webseiten gut geeignet sind, wie links in Abbildung 3-3 dargestellt . Die Standardbreite beträgt 980 Pixel. Diese Standardeinstellungen funktionieren jedoch möglicherweise nicht gut für Ihre Webseiten, insbesondere wenn Sie Ihre Website für ein bestimmtes Gerät anpassen. Zum Beispiel erscheint die Webseite rechts in Abbildung 3-3 zu eng. Da Safari unter iOS ein Ansichtsfenster bietet, können Sie die Standardeinstellungen ändern. Abbildung 3-3 Die Standardeinstellungen funktionieren für die meisten Webseiten gut

Verwenden des Viewport-Meta-Tags

Verwenden Sie die viewport Meta-Tag zur Verbesserung der Darstellung Ihrer Webinhalte auf iOS. Normalerweise verwenden Sie das viewport Meta-Tag, um die Breite und den ursprünglichen Maßstab des Viewports festzulegen. Wenn Ihre Webseite beispielsweise schmaler als 980 Pixel ist, sollten Sie die Breite des Ansichtsfensters an Ihren Webinhalt anpassen. Wenn Sie eine iPhone- oder iPod touch-spezifische Webanwendung entwerfen, stellen Sie die Breite auf die Breite des Geräts ein. Eine ausführliche Beschreibung des viewport Meta-Tags finden Sie unter Unterstützte Metatags. Da iOS auf Geräten mit unterschiedlichen Bildschirmauflösungen ausgeführt wird, sollten Sie die Konstanten anstelle von numerischen Werten verwenden, wenn Sie sich auf die Abmessungen eines Geräts beziehen. Verwenden Sie die device-width für die Breite des Geräts und die device-height für die Höhe im Hochformat. Sie müssen nicht jede Viewport-Eigenschaft festlegen. Wenn nur eine Teilmenge der Eigenschaften festgelegt ist, führt Safari unter iOS die anderen Werte zusammen. Wenn Sie beispielsweise die Skalierung auf 1.0 einstellen, geht Safari davon aus, dass die Breite device-width im Hochformat und die device-height im Querformat entspricht. Wenn Sie also eine Breite von 980 Pixel und eine anfängliche Skalierung von 1,0 festlegen möchten, legen Sie beide Eigenschaften fest. Um beispielsweise die Breite des Ansichtsfensters auf die Breite des Geräts festzulegen, fügen Sie der HTML-Datei Folgendes hinzu:

Um den anfänglichen Maßstab auf 1.0 , fügen Sie dies Ihrer HTML-Datei hinzu:

Verwenden Sie die Safari unter iOS-Konsole, um das Debuggen Ihrer Webseiten zu unterstützen, wie im Safari Web Inspector-Handbuch beschrieben . Die Konsole enthält Tipps zur Auswahl von Viewport-Werten. Sie werden beispielsweise daran erinnert, die Konstanten zu verwenden, wenn Sie sich auf die Breite und Höhe des Geräts beziehen.

Ändern der Breite und Höhe des Ansichtsfensters

Normalerweise stellen Sie die Breite des Darstellungsbereichs so ein, dass es Ihrem Webinhalt entspricht. Dies ist die wichtigste Optimierung, die Sie für iOS durchführen können. Stellen Sie sicher, dass Ihre Webseite beim ersten Anzeigen unter iOS gut aussieht. Die Mehrheit der Webseiten passt gut in den sichtbaren Bereich, wobei die Breite des Ansichtsfensters auf 980 Pixel im Hochformat eingestellt ist (siehe Abbildung 3-4) . Wenn Safari unter iOS die Breite des Ansichtsfensters nicht auf 980 Pixel festgelegt hat, wird nur die obere linke Ecke der Webseite (grau dargestellt) angezeigt. Dieser Standard funktioniert jedoch nicht für alle Webseiten. Sie sollten also das viewport Meta-Tag verwenden, wenn Ihre Webseite anders ist. Weitere Informationen zum viewport Sie unter Unterstützte viewport . Abbildung 3-4 Vergleich der Ansichtsfenster-Breiten von 320 und 980 Wenn Ihre Webseite schmaler als die Standardbreite ist (siehe Abbildung 3-5 links), stellen Sie die Breite des Darstellungsbereichs auf die Breite Ihrer Webseite ein (siehe Abbildung 3-5 rechts). Fügen Sie dazu der HTML-Datei im -Block Folgendes hinzu: Ersetzen Sie 590 durch die Breite Ihrer Webseite:

Abbildung 3-5 Die Webseite ist für die Standardeinstellungen zu eng

Es ist besonders wichtig, die Breite des Darstellungsfelds für Webanwendungen zu ändern, die für Geräte mit kleineren Bildschirmen wie iPhone und iPod touch entwickelt wurden. Abbildung 3-6 zeigt den Effekt der Einstellung der Breite des Ansichtsfensters auf device-width . Lesen Sie Viewport-Einstellungen für Webanwendungen, um weitere Tipps zu Webanwendungen zu erhalten. Abbildung 3-6 Die Webanwendungsseite ist für Standardeinstellungen zu klein
Auf ähnliche Weise können Sie die Höhe des Darstellungsbereichs an Ihren Webinhalt anpassen.

Wie Safari Breite, Höhe und Anfangskala ermittelt

Wenn Sie nur einige Eigenschaften festlegen, führt Safari unter iOS die Werte der anderen Eigenschaften mit dem Ziel zusammen, die Webseite in den sichtbaren Bereich einzufügen. Wenn beispielsweise nur die ursprüngliche Skala eingestellt ist, werden die Breite und Höhe ermittelt. Wenn nur die Breite eingestellt ist, werden in ähnlicher Weise die Höhe und die ursprüngliche Skalierung hergeleitet und so weiter. Wenn die abgeleiteten Werte für Ihre Webseite nicht funktionieren, legen Sie weitere Eigenschaften des Ansichtsfensters fest. Da die Breite, Höhe und der ursprüngliche Maßstab von Safari unter iOS abgeleitet werden kann, wird die Größe des Ansichtsfensters möglicherweise geändert, wenn der Benutzer die Ausrichtung ändert. Wenn der Benutzer beispielsweise durch Drehen des Geräts von Hochformat zu Querformat wechselt, kann sich die Breite des Ansichtsfensters vergrößern. Dies ist die einzige Situation, in der eine Benutzeraktion möglicherweise die Größe des Ansichtsfensters ändert und das Layout unter iOS ändert. Das Ziel von Safari unter iOS besteht insbesondere darin, die Webseite in den sichtbaren Bereich zu passen, wenn sie vollständig herausgezoomt wird, indem ein Verhältnis beibehalten wird, das dem Verhältnis des sichtbaren Bereichs in beiden Richtungen entspricht. Dies wird am besten veranschaulicht, wenn Sie die Eigenschaften des Ansichtsfensters unabhängig einstellen und die Auswirkungen auf die anderen Eigenschaften des Ansichtsfensters beobachten. Die folgende Serie von Beispielen zeigt denselben Webinhalt mit unterschiedlichen Einstellungen für das Ansichtsfenster. Abbildung 3-7 zeigt eine typische Webseite, die mit den Standardeinstellungen angezeigt wird, wobei die Breite des Ansichtsfensters 980 beträgt und keine anfängliche Skalierung festgelegt ist. Abbildung 3-7 Standardbreite und Anfangsskala

Abbildung 3-8 zeigt dieselbe Webseite, wenn die anfängliche Skala auf dem iPhone auf 1,0 eingestellt ist. Safari unter iOS führt die Breite und Höhe der Website in den sichtbaren Bereich. Die device-width des Darstellungsbereichs wird in Querformat auf Gerätebreite und in Querformat auf Gerätehöhe festgelegt. Abbildung 3-8 Standardbreite mit anfänglicher Skalierung auf 1,0

Wenn Sie nur die Breite des Ansichtsfensters angeben, werden in ähnlicher Weise die Höhe und der ursprüngliche Maßstab abgeleitet. Abbildung 3-9 zeigt das Rendern derselben Webseite, wenn die Breite des Ansichtsfensters auf dem iPhone auf 320 eingestellt ist. Beachten Sie, dass die Ausrichtung im Hochformat auf dieselbe Weise wie in Abbildung 3-8 wiedergegeben wird. Die Querformatausrichtung behält jedoch eine Breite bei, die der Gerätebreite entspricht. Dadurch wird die ursprüngliche Skalierung geändert und es wird vergrößert, wenn der Benutzer die Querformatausrichtung ändert . Abbildung 3-9 Auf 320 eingestellte Breite mit voreingestelltem anfänglichen Maßstab

Sie können auch festlegen, dass die Breite des Ansichtsfensters mit einem Mindestwert von 200 Pixel kleiner als der sichtbare Bereich ist. Abbildung 3-10 zeigt dieselbe Webseite, wenn die Breite des Ansichtsfensters auf dem iPhone auf 200 Pixel festgelegt ist. Safari unter iOS berücksichtigt die Höhe und die anfängliche Skalierung, die beim ersten Rendern der Webseite vergrößert wird. Abbildung 3-10 Auf 200 eingestellte Breite mit voreingestelltem anfänglichen Maßstab

Schließlich zeigt Abbildung 3-11 dieselbe Webseite, wenn sowohl die Breite als auch die ursprüngliche Skalierung auf dem iPhone festgelegt sind. Safari unter iOS berechnet die Höhe, indem ein Verhältnis beibehalten wird, das dem Verhältnis des sichtbaren Bereichs in beiden Richtungen entspricht. Wenn die Breite auf 980 eingestellt ist und die anfängliche Skala auf dem iPhone auf 1,0 eingestellt ist, wird die Höhe im Hochformat auf 1091 und im Querformat auf 425 eingestellt. Abbildung 3-11 Breite auf 980 und anfängliche Skalierung auf 1,0 eingestellt

Die Eigenschaften für minimum-scale und maximum-scale wirken sich auch auf das Verhalten bei Orientierungsänderungen aus. Der Bereich dieser Eigenschaftswerte reicht von> 0 bis 10,0. Der Standardwert für die minimum-scale beträgt 0.25 und die maximum-scale beträgt 5.0 .

Viewport-Einstellungen für Webanwendungen

Wenn Sie eine Webanwendung speziell für iOS entwerfen, ist die empfohlene Größe für Ihre Webseiten die Größe des sichtbaren Bereichs unter iOS. Apple empfiehlt, dass Sie die Breite auf device-width einstellen, sodass der Maßstab 1,0 im Hochformat beträgt und die Größe des Ansichtsfensters nicht geändert wird, wenn der Benutzer die Querformatausrichtung ändert. Wenn Sie die Eigenschaften des Ansichtsfensters nicht ändern, zeigt Safari unter iOS Ihre Webseite in der oberen linken Ecke an (siehe Abbildung 3-12) . Das Festlegen der Breite des Darstellungsbereichs sollte beim Entwerfen von Webanwendungen für iOS die erste Aufgabe sein, um zu verhindern, dass der Benutzer vor der Verwendung der Anwendung vergrößert wird. Abbildung 3-12 Ansichtsfenster-Eigenschaften nicht angeben

Durch Festlegen der Breite auf device-width im Hochformat zeigt Safari unter iOS Ihre Webseite an, wie in Abbildung 3-13 gezeigt . Benutzer können nach unten schwenken, um den Rest der Webseite anzuzeigen, wenn sie größer als der sichtbare Bereich ist. Fügen Sie diese Zeile zu Ihrer HTML-Datei hinzu, um die Breite des Darstellungsbereichs auf device-width :

Abbildung 3-13 Breite auf gerätebreite Pixel

Möglicherweise möchten Sie nicht, dass Benutzer Webanwendungen skalieren, die speziell für iOS entwickelt wurden. Legen Sie in diesem Fall die Breite fest und deaktivieren Sie die Skalierung des Benutzers wie folgt: