Site 2 mobile
Publicado por Rodrigo Pinheiro Matias às 18h do dia 27/11/2011
Categoria: Mobilidade
Hoje em dia praticamente todos os dispositivos móveis tem um navegador, com isto cresceu a demanda para se construir sites que pudessem ser acessiveis por estes dispositivos. Muito se falou em ter que se ter uma versão mobile e outra não mobile. Mas os navegadores de celular também evoluíram com o passar do tempo. Outro fator que contribuiu para facilitar a vida dos Web designs e SEOs foi que que a tela destes dispositivos também cresceram.
A liguagem de marcação HTML também ajudou muito com os problemas de compatibilidade dos sites com dispositivos móveis oferecendo diversos mecanimos para se ter uma infraestrutura para se resolver os problema de compatibilidade, um destes mecanimos é o CSS, em um mesmo documento podemos ter uma folha de estilo para todos os dispositivos ou somente para os dispositivos handset "de mão".
<DOCTYPE html>
<html>
<head>
...
<link href="all.css" rel="Stylesheet" type="text/css" media="all"/>
<link href="mobile.css" rel="Stylesheet" type="text/css" media="handset"/>
<link href="print.css" rel="Stylesheet" type="text/css" media="printer"/>
...
</head>
</html>
Com o trecho de código acima, podemos organizar o conteúdo de um site para que ele possa ser melhor visualizado em um disposivo como celular ou mesmo um tablet.
Ainda existe uma MetaTag que pode ser utilizado para interagir com o browse de navegadores mobile, a viewport que pode trocar várias informações entre o site e o navegador, veja elas na lista logo abaixo:
- width, com esta opção você pode indicar para o navagador qual o width ideal para o seu site, com isto o navegador vai ajustar o nivel do Zoom para tentar abarcar todo o seu site. Para esta propriedade existe um valor especial, o device-with que informa para o navegador utilizar o tamanho da tela.
- height, com esta opção você pode indicar para o navagador qual o height ideal para o seu site, com isto o navegador vai ajustar o nivel do Zoom para tentar abarcar todo o seu site. Para esta propriedade existe um valor especial, o device-height que informa para o navegador utilizar o tamanho da tela.
- user-scale, com esta opção podemos indicar ao navegador se damos o poder do usuário utilizar o Zoom ou não.
- initial-scale, com esta opção podemos indicar ao navegador qual o valor de Zoom inicial a ser utilizado pelo navegador.
- maximum-scale e minimum-scale, com estas opções podemos indicar ao navegador quais os niveis minimo e máximo de Zoom. Estes podem variar de 0.5 a 2.5 ficando restrito a este espaço.
No nosso blog, somente indicamos ao navegador mobile que precisamos de 1080px de width para que seja bem renderizado no navegador. Ainda poderiamos travar a opçào de zoom do usuário, mais isto não seria legal se tivessemos que atender um visitante com um disposivo com tela pequena ou com problemas de vista. Veja o trecho de código logo abaixo:
<DOCTYPE html>
<html>
<head>
...
<meta name="viewport" content="width=1080"/>
...
</head>
</html>
Como podemos ver, com ações bem simples, podemos nos livar de ter que reescrever ou redesenhar os nossos sites para que eles possam ser bem visualizados em disposivos de tela pequenas como celulares ou tela grandes como desktops.