Da Android auf Geräten mit unterschiedlichen Bildschirmgrößen und Pixeldichten verfügbar ist, berücksichtigen Sie diese Faktoren in Ihrem Webdesign, damit Ihre Seiten die richtige Größe haben.
WebView unterstützt DOM-, CSS- und Meta-Tag-Funktionen, damit Sie Webinhalte richtig rendern können.
Bei der Ausrichtung deiner Webseiten auf Android-Geräte sind zwei wichtige Faktoren zu berücksichtigen:
- Darstellungsbereich
- Der Darstellungsbereich ist ein rechteckiger Bereich, in dem sich Ihre Webseite als Drehbereich befindet. Sie können mehrere Eigenschaften für den Darstellungsbereich angeben, z. B. seine Größe und anfängliche Skalierung. Am wichtigsten ist die Breite des Darstellungsbereichs. Diese definiert die Gesamtzahl der horizontalen Pixel, die aus der Perspektive der Webseite verfügbar sind, also die Anzahl der verfügbaren CSS-Pixel.
- Bildschirmdichte
- Die
WebView-Klasse und die meisten Webbrowser unter Android wandeln CSS-Pixelwerte in dichteunabhängige Pixelwerte um, sodass Ihre Webseite dieselbe Größe hat wie ein Bildschirm mittlerer Dichte – also etwa 160 dpi. Wenn Grafiken jedoch ein wichtiges Element Ihres Webdesigns sind, achten Sie auf die Skalierung bei unterschiedlichen Dichten. Beispielsweise wird ein Bild, das auf einem 320-dpi-Bildschirm 300 Pixel breit ist, vertikal skaliert, sodass mehr physische Pixel pro CSS-Pixel verwendet werden. Dies kann zu Artefakten wie Unkenntlichmachung oder Verpixelung führen. Der Einfachheit halber fasst Android die meisten kleineren Bildschirmdichten in ein paar allgemeine Kategorien zusammen: klein, mittel und groß. Weitere Informationen zur Bildschirmdichte finden Sie unter Verschiedene Pixeldichten unterstützen.
Weitere Informationen finden Sie in den folgenden Ressourcen:
- Pixelperfekte Benutzeroberfläche in WebView
- Responsives Design lernen
- Bilder mit hohem DPI-Wert für variable Pixeldichten
Eigenschaften für Darstellungsbereich angeben
Der Darstellungsbereich ist der Bereich, in dem Ihre Webseite dargestellt wird. Obwohl der insgesamt sichtbare Bereich des Darstellungsbereichs der Größe des Bildschirms entspricht, wenn er ganz herausgezoomt wird, hat der Darstellungsbereich seine eigenen Pixelabmessungen, die er für eine Webseite zur Verfügung stellt. Obwohl ein Gerätebildschirm beispielsweise eine physische Breite von 480 Pixeln haben kann, kann der Darstellungsbereich eine Breite von 800 Pixeln haben. So ist eine 800 Pixel breite Webseite vollständig auf dem Bildschirm sichtbar, wenn der Maßstab des Darstellungsbereichs 1,0 beträgt.
In den meisten Webbrowsern unter Android, einschließlich Chrome, wird der Darstellungsbereich standardmäßig auf eine große Größe eingestellt. Dieser _Wide-Darstellungsbereich-Modus_ ist etwa 980 Pixel breit. Viele Browser zoomen standardmäßig so weit wie möglich heraus, um die volle Breite des Darstellungsbereichs anzuzeigen. Dies wird als _Übersichtsmodus_ bezeichnet.
Mit dem <meta name="viewport" ...>-Tag im Dokument <head> können Sie Eigenschaften des Darstellungsbereichs Ihrer Webseite definieren, z. B. die Breite und die anfängliche Zoomstufe.
Die folgende Syntax zeigt alle unterstützten Darstellungsbereich-Eigenschaften und die jeweils akzeptierten Wertetypen:
<meta name="viewport"
content="
height = [pixel_value | "device-height"] ,
width = [pixel_value | "device-width"] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = ["yes" | "no"]
" />
Beispielsweise gibt das folgende <meta>-Tag an, dass die Breite des Darstellungsbereichs der Breite des Gerätebildschirms entspricht und dass die Zoomfunktion deaktiviert ist:
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
Wenn Sie Ihre Website für Mobilgeräte optimieren, legen Sie in der Regel die Breite auf "device-width" fest, damit sie auf alle Geräte genau passt. Verwenden Sie dann CSS-Medienabfragen, um Layouts flexibel an verschiedene Bildschirmgrößen anzupassen.
Ausrichtung auf Gerätedichte mit CSS
WebView unterstützt -webkit-device-pixel-ratio, ein CSS-Medienfeature, mit dem Sie Stile für bestimmte Bildschirmdichten erstellen können. Der Wert, den Sie auf diese Funktion anwenden, muss 0,75, 1 oder 1,5 sein.Damit wird angegeben, dass die Stile für Geräte mit niedriger, mittlerer bzw.hoher Dichte vorgesehen sind.
Sie können für jede Dichte ein separates Stylesheet erstellen:
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
Oder geben Sie die verschiedenen Stile in einem Stylesheet an:
#header {
background:url(medium-density-image.png);
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
/* CSS for high-density screens */
#header {
background:url(high-density-image.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 0.75) {
/* CSS for low-density screens */
#header {
background:url(low-density-image.png);
}
}
Weitere Informationen zum Umgang mit unterschiedlichen Bildschirmdichten, insbesondere Bildern, finden Sie unter Bilder mit hohem DPI-Wert für variable Pixeldichten.
Zielgerätedichte mit JavaScript
WebView unterstützt window.devicePixelRatio. Dies ist eine DOM-Eigenschaft, mit der Sie die Dichte des aktuellen Geräts abfragen können. Der Wert dieser Eigenschaft gibt den Skalierungsfaktor für das aktuelle Gerät an. Wenn der Wert von window.devicePixelRatio 1,0 ist, gilt das Gerät als Gerät mit mittlerer Dichte und es wird standardmäßig keine Skalierung angewendet. Bei einem Wert von 1, 5 wird das Gerät als Gerät mit hoher Dichte betrachtet und die Seite wird standardmäßig auf das 1, 5-Fache skaliert. Wenn der Wert 0,75 ist, gilt das Gerät als Gerät mit niedriger Dichte und die Seite wird standardmäßig auf das 0,75-Fache skaliert.
Die vom Android-Browser und von WebView angewendete Skalierung basiert auf der Zieldichte der Webseite. Wie im Abschnitt Zieldichte des Darstellungsbereichs festlegen beschrieben, ist das Standardziel eine mittlere Dichte. Sie können das Ziel jedoch ändern, um festzulegen, wie Ihre Webseite für verschiedene Bildschirmdichten skaliert wird.
So können Sie die Gerätedichte beispielsweise mit JavaScript abfragen:
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
alert("This is a low-density screen");
}