Como ativar a capacidade do smartphone em sites

O uso da Internet através de dispositivos móveis tem aumentado desde o lançamento do iPhone da Apple. Devido aos diferentes tamanhos de tela dos dispositivos móveis e sua interface touchscreen, os sites não aparecem ou funcionam em um dispositivo móvel da mesma maneira que aparecem ou funcionam na tela do computador. Para manter os leitores, crie uma versão para smartphone do seu site usando folhas de estilo em cascata.

Limitações da navegação por smartphone

A navegação por smartphones difere da navegação baseada em computador de duas formas significativas. Primeiro, o tamanho de tela disponível em um smartphone é muito menor do que em um computador, o que significa que alguns sites aparecerão desordenados ou, em alguns casos, ilegíveis em um smartphone. Um usuário de smartphone terá que rolar para baixo ou aumentar o zoom em um site otimizado para visualização por computador. Em segundo lugar, os smartphones respondem aos cliques de toque em vez do movimento do cursor e, assim, os elementos do website que mudam com base no movimento do cursor podem ser problemáticos em um smartphone. Por exemplo, elementos que mudam quando o cursor passa sobre eles não se comportarão da maneira desejada em um smartphone, pois pairar não faz nada em um smartphone. Além disso, menus suspensos podem ser problemáticos para alguns usuários de smartphones.

Tamanhos Relativos de CSS

Se você estiver alterando o tamanho de determinados elementos em seu site, só precisará alterar o arquivo CSS do site. Para a legibilidade do smartphone, altere suas dimensões CSS e tamanhos de fonte para unidades relativas em vez de unidades absolutas. Por exemplo, a largura e a altura de qualquer elemento específico devem ser dadas em porcentagens em vez de pixels. Isso irá dimensionar os elementos com base em uma porcentagem da janela do navegador ou do elemento pai. Para tamanhos de fonte, use ems em vez de pixels. Um em é igual ao tamanho atual da fonte em pixels. Portanto, dois ems é o dobro do tamanho da fonte atual e assim por diante. Essas alterações devem ser salvas em um arquivo CSS separado.

Propriedades de exibição CSS

Para ocultar completamente um elemento do seu site, adicione a propriedade "display: none" ao estilo CSS desse elemento. A propriedade "display: none" ocultará completamente um elemento de tal forma que não ocupará espaço na janela. Use isso em elementos como menus suspensos ou imagens que ocupam muito espaço na tela. Isso permitirá que os outros elementos do seu site sejam organizados na janela como se o elemento oculto nunca tivesse existido. Se você usar essa modificação, verifique se alguma informação importante do elemento oculto está visível em algum outro lugar da sua página.

Redirecionando o Navegador

Quando um dispositivo acessa um site, ele lê a seção do documento HTML primeiro. Você pode vincular a várias folhas de estilo CSS na seção de um documento. Se um dispositivo móvel carregar seu site, o navegador carregará a folha de estilo identificada pelo atributo media = "handheld" em vez da folha de estilo padrão. Você também pode redirecionar o navegador para diferentes folhas de estilo com base no tamanho da tela. Isso pode ser útil se você quiser estilizar seu website de maneira diferente para diferentes dispositivos móveis. Consulte Recursos para obter uma lista de dimensões comuns da tela do smartphone.

HTML alternativo

Se você está mudando drasticamente a organização e o layout do seu site além de um novo arquivo CSS, você pode querer criar um novo arquivo HTML com as mudanças desejadas. Se você criar um arquivo HTML diferente, deverá redirecionar o navegador para o novo arquivo HTML se o usuário estiver visualizando o site em um smartphone. Além de detectar o navegador móvel, você deve modificar o script para redirecionar para a sua página HTML alternativa. Consulte Recursos para obter um link para scripts para detectar um navegador móvel.