Best practice per le app web

Lo sviluppo di pagine web e applicazioni per dispositivi mobili presenta sfide diverse rispetto allo sviluppo di una pagina web per browser web desktop. Le seguenti pratiche possono aiutarti a fornire l'applicazione web più efficace per Android e altri dispositivi mobili.

  1. Reindirizza i dispositivi mobili a una versione dedicata per dispositivi mobili del tuo sito web. Esistono diversi utilizzare i reindirizzamenti lato server. Un metodo molto comune è "sniff" il Stringa dello user agent fornita dal browser web. Per determinare se pubblicare o meno una versione del sito per dispositivi mobili, nello user agent.
  2. Utilizzare HTML5 per i dispositivi mobili. HTML5 è il linguaggio di markup più comune utilizzato per i siti web mobile. Questo standard incoraggia lo sviluppo mobile-first per contribuire a garantire che i siti web funzionino su una serie di dispositivi mobili. A differenza dei linguaggi web precedenti, HTML5 utilizza i linguaggi <DOCTYPE> e charset dichiarazioni: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Utilizza i metadati dell'area visibile per ridimensionare correttamente la pagina web. Nel documento <head>, fornisci metadati che specificano in che modo vuoi che l'area visibile del browser eseguire il rendering della tua pagina web. Ad esempio, i metadati dell'area visibile possono specificare l'altezza e la larghezza l'area visibile del browser, la scala iniziale della pagina e la densità dello schermo target.

    L'esempio seguente mostra come impostare i metadati dell'area visibile:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Per ulteriori informazioni su come utilizzare i metadati dell'area visibile per i dispositivi Android, leggi l'articolo Supportare schermi diversi nelle app web.

  4. Utilizza un layout lineare verticale. Evita all'utente di scorrere verso sinistra e verso destra mentre la navigazione nella pagina. Scorrere verso l'alto e verso il basso è più facile per l'utente e rende la pagina più semplice.
  5. Imposta l'altezza e la larghezza del layout su match_parent. L'impostazione del L'altezza e la larghezza dell'oggetto WebView per match_parent assicura che le visualizzazioni della tua app siano ridimensionate correttamente. Consigliamo di non impostare l'altezza a wrap_content perché determina un ridimensionamento errato. Analogamente, l'impostazione la larghezza del layout a wrap_content non è supportata e fa sì che WebView utilizza la larghezza di quello principale. Di conseguenza, è importante assicurarsi che nessuno degli oggetti di layout principali dell'oggetto WebView hanno altezza e larghezza impostate su wrap_content.
  6. Evita più richieste di file. Perché i dispositivi mobili di solito hanno una velocità di connessione più lento rispetto ai computer desktop, assicurati che la pagina si carichi il più velocemente possibile. Un modo per velocizzarlo è evita di caricare file aggiuntivi come fogli di stile e file di script nell'<head>. Inoltre, considera un'analisi dei dispositivi mobili efficace PageSpeed Insights di Google per suggerimenti dettagliati per l'ottimizzazione specifici per la tua app.

Risorse aggiuntive