Supportare diversi schermi nelle app web

Poiché Android è disponibile su dispositivi con schermi di varie dimensioni e densità di pixel, prendi in considerazione questi fattori nel tuo design web in modo che le pagine siano di dimensioni adeguate. WebView supporta DOM, CSS e meta tag per aiutarti a visualizzare in modo appropriato i tuoi contenuti web.

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

Area visibile
L'area visibile è l'area rettangolare che offre un'area disegnabile per la tua pagina web. Tu puoi specificare diverse proprietà dell'area visibile, come le dimensioni e la scala iniziale. La più importante è dell'area visibile, che definisce il numero totale di pixel orizzontali disponibili dalla dimensione il numero di pixel CSS disponibili.
La densità dello schermo
La classe WebView e la maggior parte dei browser web su Android convertono i valori in pixel del CSS ai valori dei pixel indipendenti dalla densità, in modo che la pagina web abbia la stessa dimensione percepibile di schermo a media densità—circa 160 dpi. Tuttavia, se le immagini sono un elemento importante del tuo web design, presta attenzione alla scalabilità che si verifica su diverse densità. Ad esempio, un'immagine con una larghezza di 300 px su uno schermo da 320 dpi viene ridimensionato e utilizza più pixel fisici per CSS pixel. Questo può produrre artefatti come sfocature e pixelizzazione. Per semplicità, Android comprime densità dello schermo più piccole in alcune categorie generali: piccolo, medio e grande. Per ulteriori informazioni di più sulla densità dello schermo, leggi Supporta diverse densità di pixel.

Consulta le seguenti risorse correlate:

Specifica le proprietà dell'area visibile

L'area visibile è l'area su cui è disegnata la pagina web. Anche se il valore della visibilità totale corrisponde alle dimensioni dello schermo quando viene ingrandito completamente, l'area visibile ha un proprio pixel dimensioni che rende disponibili a una pagina web. Ad esempio, anche se lo schermo di un dispositivo potrebbe Una larghezza fisica di 480 pixel, l'area visibile può avere una larghezza di 800 pixel. Ciò consente a una pagina web progettate con una larghezza di 800 pixel siano completamente visibili sullo schermo quando la scala dell'area visibile è 1,0.

Più alta I browser web su Android, incluso Chrome, impostano l'area visibile su grandi dimensioni per impostazione predefinita. Questa _modalità area visibile ampia_ è larga circa 980 px. Molti browser diminuiscono anche lo zoom fino a è possibile per impostazione predefinita mostrare l'intera larghezza dell'area visibile, nota come _overview_mode_.

Puoi definire le proprietà dell'area visibile per la tua pagina web, come la larghezza e lo zoom iniziale a livello di account, 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 ciascuno:

<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 la larghezza dello schermo del dispositivo e che la funzionalità di zoom sia 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 utilizza le query multimediali CSS per adattare in modo flessibile i layout a schermi di diverse dimensioni.

Scegli come target la densità dei dispositivi con CSS

WebView supporta -webkit-device-pixel-ratio, un file multimediale CSS che ti consente di creare stili per densità dello schermo specifiche. Il valore applicato a questo deve essere 0,75, 1 o 1,5, per indicare che gli stili sono per dispositivi con schermi ad 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" />

In alternativa, 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 di diverse densità dello schermo, in particolare le immagini, vedi Immagini ad alto DPI per densità di pixel variabili.

Scegliere 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 la scalabilità fattore utilizzato per il dispositivo corrente. Se il valore di window.devicePixelRatio è 1,0, il dispositivo viene considerato a densità media e non viene applicato alcun ridimensionamento per impostazione predefinita. Se è 1,5, il dispositivo viene considerato un dispositivo ad alta densità e la pagina viene ridimensionata di 1,5 volte predefinito. Se il valore è 0, 75, il dispositivo viene considerato un dispositivo a bassa densità e la pagina è scalato di 0,75 volte per impostazione predefinita.

Il ridimensionamento applicato dal browser Android e da WebView si basa sul parametro densità target. Come descritto nella sezione sulla definizione dell'area visibile densità target, il target predefinito è la densità media, ma puoi modificarlo in modo che come la pagina web viene adattata alle diverse densità dello schermo.

Ad esempio, ecco come puoi eseguire query sulla densità del dispositivo con JavaScript:

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