O desenvolvimento de páginas da Web e aplicativos para dispositivos móveis apresenta desafios diferentes em comparação com o desenvolvimento de uma página da Web para navegadores da Web para computadores. As práticas a seguir podem ajudar você a fornecer o aplicativo da Web mais eficaz para Android e outros dispositivos móveis.
- Redirecione dispositivos móveis para uma versão móvel do seu site. Há várias maneiras de fazer isso usando redirecionamentos do lado do servidor. Um método comum é "detectar" a string do user agent fornecida pelo navegador da Web. Para determinar se uma versão para dispositivos móveis do seu site precisa ser veiculada, procure a string "mobile" no user agent.
- Use HTML5
para dispositivos móveis. HTML5 é a linguagem de marcação mais comum para sites móveis.
Esse padrão incentiva o desenvolvimento mobile-first para garantir que os sites funcionem em vários dispositivos. Ao contrário de linguagens da Web anteriores, o HTML5 usa declarações
<DOCTYPE>
echarset
mais simples:<!DOCTYPE html> ... <meta charset="UTF-8">
- Use os metadados da janela de visualização para redimensionar corretamente a página da Web. No documento
<head>
, forneça metadados que especifiquem como a janela de visualização do navegador deve renderizar sua página da Web. Por exemplo, os metadados da janela de visualização podem especificar a altura e a largura da janela de visualização do navegador, a escala inicial da página e a densidade da tela desejada.O exemplo a seguir mostra como definir metadados da janela de visualização:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Para mais informações sobre como usar metadados da janela de visualização em dispositivos Android, leia Suporte a telas diferentes em apps da Web.
- Use um layout linear vertical. Evite a necessidade de rolar a página para a esquerda e para a direita. Rolar para cima e para baixo é mais fácil para o usuário e simplifica sua página.
- Defina a altura e a largura do layout como
match_parent
. Definir a altura e a largura do objetoWebView
comomatch_parent
garante que as visualizações do app sejam dimensionadas corretamente. Não recomendamos definir a altura comowrap_content
, porque isso resulta em um dimensionamento incorreto. Da mesma forma, definir a largura do layout comowrap_content
não tem suporte e faz com que oWebView
use a largura do pai. Devido a esse comportamento, também é importante garantir que nenhum dos objetos de layout pai do objetoWebView
tenha a altura e largura definidas comowrap_content
. - Evite fazer muitas solicitações de arquivos. Como os dispositivos móveis geralmente têm uma velocidade de conexão
mais lenta que os computadores desktop, faça com que a página carregue o mais rápido possível. Uma maneira de acelerar o processo é evitar o carregamento de arquivos extras, como folhas de estilo e arquivos de script, na
<head>
. Além disso, considere realizar uma análise de dispositivos móveis com o PageSpeed Insights do Google para receber sugestões de otimização detalhadas específicas para seu app.
Outros recursos
- IU Pixel-Perfect no modo WebView (link em inglês)
- Conheça o design responsivo
- Imagens com DPI alto para densidades de pixel variáveis
- Práticas recomendadas da Web para dispositivos móveis
- Torne a Web mais rápida