Supportare diversi schermi nelle app web

Poiché Android è disponibile su dispositivi con schermi di varie dimensioni e densità di pixel, tieni conto di questi fattori nel tuo web design in modo che le pagine vengano dimensionate in modo appropriato. WebView supporta le funzionalità DOM, CSS e dei meta tag per aiutarti a visualizzare correttamente i tuoi contenuti web.

Quando scegli come target delle tue pagine web per dispositivi Android, ci sono due fattori principali da tenere in considerazione:

Area visibile
L'area visibile è un'area rettangolare che fornisce una regione disegnabile per la tua pagina web. Puoi specificare diverse proprietà dell'area visibile, come le dimensioni e la scala iniziale. L'aspetto più importante è la larghezza dell'area visibile, che definisce il numero totale di pixel orizzontali disponibili dal punto di vista della pagina web, ovvero il numero di pixel CSS disponibili.
Densità dello schermo
La classe WebView e la maggior parte dei browser web su Android convertono i valori dei pixel CSS in valori dei pixel indipendenti dalla densità, in modo che la tua pagina web abbia le stesse dimensioni percepibili di una schermata a media densità, ovvero circa 160 DPI. Tuttavia, se le immagini sono un elemento importante del web design, presta attenzione al ridimensionamento che si verifica su densità diverse. Ad esempio, un'immagine larga 300 px su uno schermo da 320 dpi viene ingrandita in scala e utilizza più pixel fisici per pixel CSS. In questo modo si possono produrre artefatti come sfocatura e pixelizzazione. Per semplicità, Android comprime la maggior parte delle densità degli schermi più piccole in alcune categorie generali: piccolo, medio e grande. Per scoprire di più sulla densità dello schermo, consulta la pagina Supporto di diverse densità di pixel.

Consulta le seguenti risorse correlate:

Specifica le proprietà dell'area visibile

L'area visibile è l'area in cui è disegnata la pagina web. Sebbene l'area visibile totale dell'area visibile corrisponda alle dimensioni dello schermo quando viene diminuito completamente lo zoom, l'area visibile ha le proprie dimensioni in pixel che rende disponibili per una pagina web. Ad esempio, anche se lo schermo di un dispositivo potrebbe avere una larghezza fisica di 480 pixel, l'area visibile può avere una larghezza di 800 pixel. In questo modo, una pagina web progettata con una larghezza di 800 pixel è completamente visibile sullo schermo quando la scala dell'area visibile è pari a 1,0.

Per impostazione predefinita, la maggior parte dei browser web su Android, tra cui Chrome, imposta l'area visibile su dimensioni grandi. Questa modalità di visualizzazione _wide_ ha una larghezza di circa 980 px. Per impostazione predefinita, molti browser diminuiscono inoltre lo zoom il più possibile per mostrare l'intera larghezza dell'area visibile, in _modalità panoramica_.

Puoi definire le proprietà dell'area visibile per la pagina web, come la larghezza e il livello di zoom iniziale, utilizzando il tag <meta name="viewport" ...> nel documento <head>.

La seguente sintassi mostra tutte le proprietà dell'area visibile supportate e i tipi di valori accettati da ciascuna:

<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"]
          " />

Ad esempio, il seguente tag <meta> specifica che la larghezza dell'area visibile corrisponde a quella dello schermo del dispositivo e che la funzionalità di zoom è disattivata:

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

Quando ottimizzi il sito per i dispositivi mobili, in genere imposti la larghezza su "device-width" in modo che le dimensioni si adattino esattamente a tutti i dispositivi, poi utilizzi le query supporti CSS per adattare in modo flessibile i layout alle diverse dimensioni dello schermo.

Scegli come target la densità del dispositivo con CSS

WebView supporta -webkit-device-pixel-ratio, una funzionalità dei contenuti multimediali CSS che consente di creare stili per densità schermo specifiche. Il valore applicato a questa funzionalità deve essere 0, 75, 1 o 1, 5 per indicare che gli stili sono destinati, rispettivamente, a dispositivi con schermi a bassa, media o alta densità.

Puoi creare fogli di stile separati per ogni densità:

<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" />

Oppure specifica i diversi stili in un foglio di stile:

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

Per ulteriori informazioni sulla gestione delle diverse densità dello schermo, in particolare delle immagini, consulta la sezione Immagini con DPI elevati per densità di pixel variabili.

Scegli come target la densità del dispositivo con JavaScript

WebView supporta window.devicePixelRatio, una proprietà DOM che consente di eseguire query sulla densità del dispositivo corrente. Il valore di questa proprietà specifica il fattore di ridimensionamento utilizzato per il dispositivo corrente. Se il valore di window.devicePixelRatio è 1,0, il dispositivo è considerato un dispositivo a media densità e non viene applicato alcun ridimensionamento per impostazione predefinita. Se il valore è 1,5, il dispositivo è considerato un dispositivo ad alta densità e la pagina viene ridimensionata di 1,5 volte per impostazione predefinita. Se il valore è 0,75, il dispositivo viene considerato un dispositivo a bassa densità e la pagina viene scalata di 0,75x per impostazione predefinita.

La scalabilità applicata dal browser Android e da WebView si basa sulla densità del target della pagina web. Come descritto nella sezione Definizione della densità target dell'area visibile, il target predefinito è la densità media, ma puoi modificarlo in modo da influire sul modo in cui la pagina web viene ridimensionata per le diverse densità dello schermo.

Ad esempio, per eseguire query sulla densità del dispositivo con JavaScript, procedi nel seguente modo:

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