Diese Seite wurde von der Cloud Translation API übersetzt.

Pixelgenaue WebView

Veröffentlicht: 28. Februar 2014

Es gibt eine Reihe von Optionen, mit denen Sie die perfekte Benutzeroberfläche für Ihre WebView erstellen können.

Darstellungsbereich-Meta-Tag festlegen

Das Meta-Tag „viewport“ ist eines der wichtigsten Tags, die Sie Ihrer Webanwendung hinzufügen sollten. Ohne dieses Tag verhält sich die WebView möglicherweise so, als wäre Ihre Website für Desktop-Browser konzipiert. Dadurch wird Ihre Webseite breiter (normalerweise 980 px) und auf die Breite der WebView skaliert. In den meisten Fällen führt dies zu einer winzigen Übersichtsversion der Seite, bei der der Nutzer schwenken und zoomen muss, um die Inhalte lesen zu können.

Wenn die Breite Ihrer Website 100% der Breite der WebView betragen soll, legen Sie das Meta-Tag „viewport“ fest:

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

Legen Sie „width“ auf den Spezialwert „device-width“ fest, um mehr Kontrolle über das Seitenlayout zu erhalten.

Standardmäßig legt WebView den Darstellungsbereich auf „device-width“ fest, anstatt standardmäßig einen Desktop-Darstellungsbereich zu verwenden. Für ein zuverlässiges und kontrolliertes Verhalten empfiehlt es sich jedoch, das Meta-Tag „viewport“ einzufügen.

Desktopwebsites anzeigen

In einigen Fällen müssen Sie möglicherweise Inhalte anzeigen, die nicht für Mobilgeräte optimiert sind. Beispielsweise können Sie Inhalte anzeigen, die Sie nicht verwalten. In diesem Fall können Sie das WebView dazu zwingen, einen Desktop-Darstellungsbereich zu verwenden:

Wenn diese Methoden nicht festgelegt sind und kein Darstellungsbereich angegeben ist, versucht WebView, die Breite des Darstellungsbereichs anhand der Inhaltsgröße festzulegen.

Außerdem können Sie den Layoutalgorithmus TEXT_AUTOSIZING verwenden, der die Schriftgröße erhöht, damit der Text auf einem Mobilgerät besser lesbar ist. Weitere Informationen finden Sie unter setLayoutAlgorithm.

Responsives Webdesign verwenden

Responsives Design ist ein Ansatz für die Gestaltung einer Benutzeroberfläche, die sich je nach Bildschirmgröße ändert.

Es gibt verschiedene Möglichkeiten, responsives Design zu implementieren. Eine der gängigsten Methoden sind @media-Abfragen, mit denen CSS auf Elemente angewendet wird, die auf den Eigenschaften eines Geräts basieren.

Angenommen, Sie möchten je nach Ausrichtung von einem vertikalen zu einem horizontalen Layout wechseln. Legen Sie in den CSS-Properties als Standardeinstellung „Hochformat“ fest:

.page-container {
    display: -webkit-box;
    display: flex;

    -webkit-box-orient: vertical;
    flex-direction: column;

    padding: 20px;
    box-sizing: border-box;
}

Wenn Sie zu einem horizontalen Layout wechseln möchten, ändern Sie die Eigenschaft „flex-direction“ entsprechend der Ausrichtung:

@media screen and (orientation: landscape) {
  .page-container.notification-opened {
    -webkit-box-orient: horizontal;
    flex-direction: row;
  }

  .page-container.notification-opened > .notification-arrow {
    margin-right: 20px;
  }
}

Sie können das Layout auch anhand der Bildschirmbreite ändern.

Beispielsweise kann die Breite der Schaltfläche von 100% auf einen kleineren Wert angepasst werden, wenn die physische Bildschirmgröße zunimmt.

button {
  display: block;
  width: 100%;
  ...
}

@media screen and (min-width: 500px) {
  button {
    width: 60%;
  }
}

@media screen and (min-width: 750px) {
  button {
    width: 40%;
    max-width: 400px;
  }
}

Das sind nur kleine Änderungen. Je nach Benutzeroberfläche können Sie mithilfe von Mediaabfragen jedoch viel größere Änderungen an der Darstellung Ihrer Anwendung vornehmen, ohne die HTML-Datei zu ändern.

Scharfe und klare Bilder

Die Vielfalt der Bildschirmgrößen und -dichten stellt auch für Bilder eine Herausforderung dar. Kleinere Bilder benötigen weniger Arbeitsspeicher und werden schneller geladen, sind aber unscharf, wenn Sie sie vergrößern.

Hier sind einige Tipps und Tricks, damit Ihre Bilder auf jedem Bildschirm gestochen scharf und klar aussehen:

Verwenden Sie CSS für skalierbare Effekte.
Verwenden Sie Vektorgrafiken.
Stellen Sie Fotos mit hoher Auflösung bereit.

CSS für skalierbare Effekte verwenden

Verwenden Sie nach Möglichkeit CSS anstelle von Bildern. Es ist möglich, dass das Rendern einiger Kombinationen von CSS-Eigenschaften aufwendig ist. Testen Sie immer die spezifischen Kombinationen, die Sie verwenden.

Weitere Informationen zu First Contentful Paint (FCP): Dieser Messwert gibt an, wie lange es dauert, bis ein Teil des Seiteninhalts auf dem Bildschirm angezeigt wird, nachdem der Nutzer die Seite aufgerufen hat. „Inhalte“ bezieht sich auf Text, Bilder (einschließlich Hintergrundbilder), <svg>-Elemente und nicht weiße <canvas>-Elemente.

Vektorgrafiken verwenden

Scalable Vector Graphics (SVGs) sind eine gute Möglichkeit, ein skalierbares Bild bereitzustellen. Für Bilder, die sich gut für Vektorgrafiken eignen, bietet SVG hochwertige Bilder mit sehr kleiner Dateigröße.

Fotos in hoher Auflösung bereitstellen

Verwenden Sie ein Foto, das für ein Gerät mit hoher Auflösung geeignet ist, und skalieren Sie das Bild mit CSS. So kann das Bild geräteübergreifend in hoher Qualität gerendert werden. Wenn Sie beim Generieren des Bilds eine hohe Komprimierung (niedrige Qualitätseinstellung) verwenden, können Sie möglicherweise gute visuelle Ergebnisse bei einer angemessenen Dateigröße erzielen.

Dieser Ansatz hat einige potenzielle Nachteile: Stark komprimierte Bilder können einige visuelle Artefakte aufweisen. Sie müssen also experimentieren, um festzustellen, welche Komprimierungsstufe für Sie akzeptabel ist. Außerdem kann das Ändern der Größe des Bildes in CSS sehr aufwendig sein.

Wenn eine hohe Komprimierung nicht Ihren Anforderungen entspricht, können Sie das WebP-Format verwenden. Dieses Format bietet eine hohe Bildqualität bei relativ kleiner Dateigröße. Denken Sie daran, einen Fallback für Android-Versionen bereitzustellen, in denen WebP nicht unterstützt wird.

Detailgenaue Steuerung

In vielen Fällen können Sie kein einziges Bild für alle Geräte verwenden. In diesem Fall können Sie je nach Bildschirmgröße und -dichte unterschiedliche Bilder auswählen. Verwenden Sie Media-Queries, um Hintergrundbilder nach Bildschirmgröße und -dichte auszuwählen.

Sie können zwar JavaScript verwenden, um das Laden von Bildern zu steuern, das erhöht aber die Komplexität.

Medienabfragen und Bildschirmdichte

Wenn Sie ein Bild basierend auf der Bildschirmdichte auswählen möchten, müssen Sie in Ihrer Medienabfrage dpi- oder dppx-Einheiten verwenden. Die Einheit dpi steht für Punkte pro CSS-Zoll und dppx für Punkte pro CSS-Pixel.

In der folgenden Tabelle sehen Sie die Beziehung zwischen dpi und dppx.

Pixel-Verhältnis des Geräts	Allgemeine Bildschirmdichte	Pixel pro CSS-Zoll (`dpi`)	Pixeldichte (`dppx`)
1x	MDPI	96`dpi`	1`dppx`
1,5-fach	HiDPI (High Dots Per Inch)	144`dpi`	1.5`dppx`
2	XHDPI	192`dpi`	2`dppx`

Die allgemeinen Bereiche für die Bildschirmdichte werden von Android definiert und werden auch an anderer Stelle verwendet, um die Bildschirmdichte auszudrücken (z. B. https://screensiz.es).

Hintergrundbilder

Mithilfe von Medienabfragen können Sie Elementen Hintergrundbilder zuweisen. Wenn Sie beispielsweise ein Logobild mit einer Größe von 256 × 256 Pixeln auf einem Gerät mit einem Pixelverhältnis von 1,0 verwenden, können Sie die folgenden CSS-Regeln verwenden:

.welcome-header > h1 {
  flex: 1;

  width: 100%;

  max-height: 256px;
  max-width: 256px;

  background-image: url('../images/html5_256x256.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

Wenn Sie auf Geräten mit einem Pixelverhältnis von 1,5 (hdpi) und 2,0 (xhdpi) ein größeres Bild einblenden möchten, können Sie die folgenden Regeln hinzufügen:

@media screen and (min-resolution: 1.5dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_384x384.png');
  }
}

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

Sie können diese Technik dann mit anderen Medienabfragen wie min-width kombinieren. Das ist nützlich, wenn Sie verschiedene Formfaktoren berücksichtigen.

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

@media screen and (min-resolution: 2dppx) and (min-width: 1000px) {
  .welcome-header > h1{
    background-image: url('../images/html5_1024x1024.png');

    max-height: 512px;
    max-width: 512px;
  }
}

Sie werden feststellen, dass max-height und max-width für eine Auflösung von 2ddpx auf 512 Pixel festgelegt sind, wobei ein Bild mit 1.024 × 1.024 Pixeln verwendet wird. Das liegt daran, dass ein CSS-Pixel das Pixelverhältnis des Geräts berücksichtigt (512 Pixel × 2 = 1.024 Pixel).

Wie wäre es mit `<img/>`?

Das Web bietet derzeit keine Lösung für dieses Problem. Es gibt einige Vorschläge, die aber in aktuellen Browsern oder in der WebView nicht verfügbar sind.

Wenn Sie Ihr DOM in JavaScript generieren, können Sie in der Zwischenzeit mehrere Bildressourcen in einer durchdachten Verzeichnisstruktur erstellen:

images/
  mdpi/
    imagename.png
  hdpi/
    imagename.png
  xhdpi/
    imagename.png

Verwenden Sie dann das Pixelverhältnis, um das am besten geeignete Bild abzurufen:

function getDensityDirectoryName() {
  if(!window.devicePixelRatio) {
    return 'mdpi';
  }

  if(window.devicePixelRatio > 1.5) {
    return 'xhdpi';
  } else if(window.devicePixelRatio > 1.0) {
    return 'hdpi';
  }

  return 'mdpi';
}

Alternativ können Sie die Basis-URL der Seite ändern, um die relativen URLs für Bilder zu definieren.

<!doctype html>
<html class="no-js">
<head>
  <script>
    function getDensityDirectoryName() {
      if(!window.devicePixelRatio) {
          return 'mdpi';
      }

      if(window.devicePixelRatio > 1.5) {
          return 'xhdpi';
      } else if(window.devicePixelRatio > 1.0) {
          return 'hdpi';
      }

      return 'mdpi';
    }

    var baseUrl =
        'file:///android_asset/www/img-js-diff/ratiores/'+getDensityDirectoryName()+'/';
    document.write('<base href="'+baseUrl+'">');
  </script>

    ...
</head>
<body>
    ...
</body>
</html>

Bei diesem Ansatz wird das Laden der Seite blockiert und die Verwendung absoluter Pfade für alle Ressourcen wie Bilder, Scripts und CSS-Dateien erzwungen, da die Basis-URL auf ein dichtespezifisches Verzeichnis verweist.