Verschiedene Bildschirme in Web-Apps unterstützen

Da Android auf Geräten mit verschiedenen 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-Tags , mit denen Sie Webinhalte richtig rendern können.

Bei der Ausrichtung Ihrer Webseiten für Android-Mobilgeräte sind zwei wichtige Faktoren zu berücksichtigen. für:

Darstellungsbereich
Der Darstellungsbereich ist ein rechteckiger Bereich, der als Zeichenbereich für Ihre Webseite dient. Ich kann verschiedene Eigenschaften des Darstellungsbereichs angeben, wie etwa seine Größe und Anfangsskalierung. Am wichtigsten ist die Darstellungsbereichbreite, die die Gesamtzahl der horizontalen Pixel definiert, die über die die Anzahl der verfügbaren CSS-Pixel.
Bildschirmdichte
Die Klasse WebView und die meisten Webbrowser unter Android konvertieren Ihre CSS-Pixelwerte. mit dichteunabhängigen Pixelwerten, sodass Ihre Webseite dieselbe wahrnehmbare Größe wie ein Bildschirm mittlerer Dichte: ca. 160 dpi Sind Grafiken ein wichtiges Element Ihrer Webdesign arbeiten, achten Sie auf die Skalierung bei verschiedenen Dichten. Beispiel: Ein Bild mit einer Breite von 300 Pixeln auf einem Bildschirm mit 320 dpi vertikal skaliert werden, sodass pro CSS mehr physische Pixel verwendet werden. Pixel. Dies kann zu Artefakten wie Unkenntlichmachung und Verpixelung führen. Zur Vereinfachung wurde Android den kleinsten Bildschirmdichten in ein paar allgemeine Kategorien eingeteilt werden: klein, mittel und groß. Weitere Informationen Weitere Informationen zur Bildschirmdichte Unterstützen Sie unterschiedliche Pixeldichten.

Weitere Informationen finden Sie in den folgenden verwandten Ressourcen:

Eigenschaften des Darstellungsbereichs angeben

Der Darstellungsbereich ist der Bereich, in dem Ihre Webseite gezeichnet wird. Obwohl die gesamte Sichtbarkeit des Darstellungsbereichs entspricht der Bereich beim Herauszoomen der Bildschirmgröße, hat der Darstellungsbereich sein eigenes Pixel Dimensionen, die es für eine Webseite zur Verfügung stellt. Auch wenn ein Gerätebildschirm eine physische Breite von 480 Pixeln hat, kann der Darstellungsbereich eine Breite von 800 Pixeln haben. Dadurch kann eine Webseite mit einer Breite von 800 Pixeln vollständig auf dem Bildschirm sichtbar sind, wenn der Darstellungsbereich 1,0 beträgt.

Meiste In Webbrowsern unter Android, einschließlich Chrome, ist der Darstellungsbereich standardmäßig hoch eingestellt. Dieser _wide Darstellungsbereichsmodus_ ist etwa 980 Pixel breit. In vielen Browsern wird so weit herausgezoomt, standardmäßig die volle Breite des Darstellungsbereichs anzeigen. Dies wird als _Übersichtsmodus_ bezeichnet.

<ph type="x-smartling-placeholder">

Sie können Eigenschaften des Darstellungsbereichs für Ihre Webseite definieren, z. B. die Breite und den anfänglichen Zoom. Ebene, unter Verwendung des <meta name="viewport" ...>-Tags im Dokument <head>.

Die folgende Syntax zeigt alle unterstützten Darstellungsbereichseigenschaften und die Typen von Werten. akzeptiert von jedem:

<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 mit die Breite des Gerätebildschirms aus und dass die Zoomfunktion deaktiviert ist:

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

Bei der Optimierung Ihrer Website für Mobilgeräte legen Sie die Breite normalerweise auf "device-width", damit die Größe für alle Geräte passt. Verwenden Sie dann CSS-Medienabfragen, um Layouts flexibel an verschiedene Bildschirmgrößen anpassen.

<ph type="x-smartling-placeholder">

Zielgerätedichte mit CSS

WebView unterstützt -webkit-device-pixel-ratio, ein CSS-Medium , mit der Sie Stile für bestimmte Bildschirmdichten erstellen können. Der Wert, den Sie auf diese Funktion muss 0,75, 1 oder 1,5 sein, um anzugeben, dass die Stile für Geräte mit niedriger, mittlerer oder Bildschirmen mit hoher Dichte.

Sie können separate Stylesheets für jede Dichte 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 einzigen 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.

Auf Gerätedichte mit JavaScript ausrichten

WebView unterstützt window.devicePixelRatio, eine DOM-Eigenschaft, die können Sie die Dichte des aktuellen Geräts abfragen. Der Wert dieser Eigenschaft gibt die Skalierung Faktor, der für das aktuelle Gerät verwendet wird. Wenn der Wert von window.devicePixelRatio 1,0 ist, gibt gilt das Gerät als Gerät mit mittlerer Dichte. Es wird standardmäßig keine Skalierung angewendet. Wenn die 1,5 ist, gilt das Gerät als HD-Gerät und die Seite wird 1,5x Standardeinstellung. Lautet der Wert 0, 75, gilt das Gerät als Gerät mit niedriger Punktdichte und die Seite wird standardmäßig auf 0,75x skaliert.

Die Skalierung, die der Android-Browser und WebView anwenden, basiert auf der die Zieldichte. Wie im Abschnitt zum Definieren des Darstellungsbereichs beschrieben. ausgewählt haben, ist das Standardziel mittlere Dichte. Sie können es aber auch so ändern, wie Ihre Webseite für unterschiedliche Bildschirmdichten skaliert wird.

So können Sie beispielsweise die Gerätedichte 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");
}