Deze pagina is vertaald door de Cloud Translation API.

Pixel-perfecte webweergave

Gepubliceerd: 28 februari 2014

Er zijn een aantal opties die u kunt gebruiken om de perfecte interface voor uw WebView te creëren.

Stel de viewport-metatag in

De viewport-metatag is een van de belangrijkste tags die u aan uw web-app kunt toevoegen. Zonder dit kan de WebView werken alsof uw site is ontworpen voor desktopbrowsers. Hierdoor krijgt uw webpagina een grotere breedte (meestal 980px) en wordt deze geschaald zodat deze past in de WebView-breedte. In de meeste gevallen resulteert dit in een kleine overzichtsversie van de pagina, waarbij de gebruiker moet pannen en zoomen om de inhoud daadwerkelijk te kunnen lezen.

Als u wilt dat de breedte van uw site 100% van de breedte van de WebView is, stelt u de viewport-metatag in:

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

Stel breedte in op de speciale waarde device-width om meer controle te krijgen over de pagina-indeling.

Standaard stelt de WebView de viewport in op apparaatbreedte, in plaats van standaard op een desktopviewport. Voor betrouwbaar en gecontroleerd gedrag is het echter een goede gewoonte om de viewport-metatag op te nemen.

Desktopsites weergeven

In sommige gevallen moet u mogelijk inhoud weergeven die niet is ontworpen voor mobiele apparaten. U kunt bijvoorbeeld inhoud weergeven waarover u geen controle heeft. In dit geval kunt u de WebView dwingen een viewport op desktopformaat te gebruiken:

Als deze methoden niet zijn ingesteld en er geen viewport is opgegeven, probeert de WebView de viewport-breedte in te stellen op basis van de inhoudsgrootte.

Daarnaast wilt u misschien het lay-outalgoritme TEXT_AUTOSIZING gebruiken, dat de lettergrootte vergroot om het leesbaarder te maken op een mobiel apparaat. Zie setLayoutAlgorithm .

Gebruik responsief ontwerp

Responsive design is een benadering voor het ontwerpen van een interface die verandert op basis van de schermgrootte.

Er zijn een aantal manieren om responsive design te implementeren. Een van de meest voorkomende zijn @media query's , die CSS toepassen op elementen op basis van de kenmerken van een apparaat.

Stel dat u bijvoorbeeld van een verticale lay-out naar een horizontale lay-out wilt gaan op basis van de oriëntatie. Stel CSS-eigenschappen in op standaard staand:

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

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

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

Als u naar een horizontale lay-out wilt overschakelen, wijzigt u de eigenschap flex-direction op basis van de oriëntatie:

@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;
  }
}

U kunt de lay-out ook wijzigen op basis van de schermbreedte.

Bijvoorbeeld door de grootte van de knopbreedte aan te passen van 100% naar iets kleiner naarmate de fysieke schermgrootte groter wordt.

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;
  }
}

Dit zijn kleine wijzigingen, maar afhankelijk van uw gebruikersinterface kunnen mediaquery's u helpen veel grotere wijzigingen aan te brengen in het uiterlijk van uw toepassing, terwijl u dezelfde HTML behoudt.

Scherpe en duidelijke beelden

De verscheidenheid aan schermformaten en -dichtheden biedt ook uitdagingen voor afbeeldingen. Kleinere afbeeldingen vereisen minder geheugen en kunnen sneller worden geladen, maar worden wazig als u ze opschaalt.

Hier zijn een paar tips en trucs om ervoor te zorgen dat uw afbeeldingen er op elk scherm helder en duidelijk uitzien:

Gebruik CSS voor schaalbare effecten.
Gebruik vectorafbeeldingen.
Zorg voor foto's in hoge resolutie.

Gebruik CSS voor schaalbare effecten

Gebruik CSS wanneer je maar kunt, in plaats van afbeeldingen. Het is mogelijk dat sommige combinaties van CSS-eigenschappen duur zijn om te renderen. Test altijd de specifieke combinaties die u gebruikt.

Meer informatie over First Contentful Paint (FCP) , dat de tijd meet vanaf het moment dat de gebruiker voor het eerst naar de pagina navigeerde tot het moment waarop een deel van de inhoud van de pagina op het scherm wordt weergegeven. 'Inhoud' verwijst naar tekst, afbeeldingen (inclusief achtergrondafbeeldingen), <svg> -elementen en niet-witte <canvas> -elementen.

Gebruik vectorafbeeldingen

Schaalbare vectorafbeeldingen (SVG's) zijn een geweldige manier om een schaalbare afbeelding te bieden. Voor afbeeldingen die zeer geschikt zijn voor vectorafbeeldingen biedt SVG afbeeldingen van hoge kwaliteit met zeer kleine bestandsgroottes.

Zorg voor foto's in hoge resolutie

Gebruik een foto die geschikt is voor een apparaat met hoge DPI en schaal de afbeelding met CSS. Op deze manier kan de afbeelding op verschillende apparaten in hoge kwaliteit worden weergegeven. Als u hoge compressie (lage kwaliteitsinstelling) gebruikt bij het genereren van de afbeelding, kunt u mogelijk goede visuele resultaten behalen met een redelijke bestandsgrootte.

Deze aanpak heeft een aantal potentiële nadelen: sterk gecomprimeerde afbeeldingen kunnen enkele visuele artefacten vertonen, dus u moet experimenteren om te bepalen welk compressieniveau u acceptabel vindt. En het formaat van de afbeelding in CSS wijzigen kan een dure operatie zijn.

Als hoge compressie niet geschikt is voor uw behoeften, probeer dan het WebP-formaat , dat een afbeelding van hoge kwaliteit oplevert met een relatief kleine bestandsgrootte. Vergeet niet een reservevoorziening te bieden voor versies van Android waarin WebP niet wordt ondersteund.

Fijnkorrelige controle

In veel gevallen kunt u niet één afbeelding voor alle apparaten gebruiken. In dit geval kunt u verschillende afbeeldingen selecteren op basis van de schermgrootte en dichtheid. Gebruik mediaquery's om achtergrondafbeeldingen te selecteren op schermgrootte en dichtheid.

U kunt JavaScript gebruiken om te bepalen hoe afbeeldingen worden geladen, maar dit zorgt voor extra complexiteit.

Mediaquery's en schermdichtheid

Om een afbeelding te selecteren op basis van de schermdichtheid, moet u dpi of dppx -eenheden gebruiken in uw mediaquery. De dpi eenheid vertegenwoordigt punten per CSS-inch, en dppx vertegenwoordigt punten per CSS-pixel.

In de volgende tabel ziet u de relatie tussen dpi en dppx .

Pixelverhouding van apparaat	Gegeneraliseerde schermdichtheid	Punten per CSS-inch ( `dpi` )	Punten per CSS-pixel ( `dppx` )
1x	MDPI	96 `dpi`	1 `dppx`
1,5x	HDPI	144 `dpi`	1,5 `dppx`
2	XHDPI	192 `dpi`	2 `dppx`

De algemene schermdichtheidsbuckets worden door Android gedefinieerd en worden op andere plaatsen gebruikt om de schermdichtheid uit te drukken (bijvoorbeeld https://screensiz.es ).

Achtergrondafbeeldingen

U kunt mediaquery's gebruiken om achtergrondafbeeldingen aan elementen toe te wijzen. Als u bijvoorbeeld een logoafbeelding met een grootte van 256 bij 256 pixels heeft op een apparaat met een pixelverhouding van 1,0, kunt u de volgende CSS-regels gebruiken:

.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;
}

Om dit uit te wisselen voor een grotere afbeelding op apparaten met een apparaatpixelverhouding van 1,5 (hdpi) en 2,0 (xhdpi), kunt u de volgende regels toevoegen:

@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');
  }
}

U kunt deze techniek vervolgens samenvoegen met andere mediaquery's, zoals min-width , wat handig is omdat u rekening houdt met verschillende vormfactoren.

@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;
  }
}

Het zal je misschien opvallen dat de max-height en max-width zijn ingesteld op 512px voor een resolutie van 2 ddpx , met een afbeelding van 1024x1024px. dit komt omdat een CSS-"pixel" daadwerkelijk rekening houdt met de pixelverhouding van het apparaat (512px * 2 = 1024px).

Hoe zit het met `<img/>` ?

Het internet heeft hier vandaag de dag geen oplossing voor. Er zijn enkele voorstellen, maar deze zijn niet beschikbaar in de huidige browsers of in de WebView.

Als u in de tussentijd uw DOM in JavaScript genereert, kunt u meerdere afbeeldingsbronnen maken in een doordachte mapstructuur:

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

Gebruik vervolgens de pixelverhouding om te proberen de meest geschikte afbeelding te verkrijgen:

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

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

  return 'mdpi';
}

Als alternatief kunt u de basis-URL van de pagina wijzigen om de relatieve URL's voor afbeeldingen te definiëren.

<!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>

Deze aanpak blokkeert het laden van pagina's en dwingt het gebruik van absolute paden af voor alle bronnen, zoals afbeeldingen, scripts en CSS-bestanden, omdat de basis-URL naar een dichtheidsspecifieke map verwijst.