O iPhone é um caso especial de dispositivo móvel e não estou falando apenas da sua popularidade. A menina dos olhos da Apple tem suas próprias regras e padrões para renderizar páginas da internet.
Não apenas o aparelho utiliza o Safari para navegação, um browser dos menos populares, como também sua versão móvel é bem diferente da versão para desktop. Como resultado, você irá encontrar muitos problemas e bugs enquanto tenta otimizar seu site para o iPhone.
Para ajudá-lo nessa tarefa, apresento 10 pequenas dicas que irão reduzir bastante o risco de dores de cabeça:
1. Teste em um ambiente apropriado
O ideal seria você ter um iPhone para testar seu desenvolvimento. De preferência, mais de uma versão do smartphone. Se isso não for possível, existem alguns bons emuladores no mercado, como o Dimensions e o Keynote Mite, que já comentamos por aqui.
2. Especifique o viewport
A Meta Tag viewport é utilizada para prevenir a auto-escala e o zoom automático de sua página web. Corretamente configurada, ela ajuda seu site a funcionar sem problemas no iPhone.
Insira o código abaixo dentro do <head> do código-fonte do documento:
3. Use os media queries apropriados
Para criar estilos específicos para determinados dispositivos iPhone, você deve usar os seguintes media queries:
// iPhone 5
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
/* INSIRA SEU ESTILO AQUI */
}
// iPhone 2G-4S
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* INSIRA SEU ESTILO AQUI */
}
// iPhone 5 portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation: portrait) {
/* INSIRA SEU ESTILO AQUI */
}
// iPhone 5 landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation: landscape) {
/* INSIRA SEU ESTILO AQUI */
}
// iPhone 2G-4S portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: portrait) {
/* INSIRA SEU ESTILO AQUI */
}
// iPhone 2G-4S landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: landscape) {
/* INSIRA SEU ESTILO AQUI */
}
// Retina display
@media screen and (-webkit-device-pixel-ratio: 2) {
/* INSIRA SEU ESTILO AQUI */
}
4. Remova o atraso de clique de 300ms
Ao clicar em um link no iPhone, há um pequeno atraso antes da página começar a carregar. Isso pode ser muito irritante depois de um tempo.
Felizmente, existe uma solução para esta configuração e ela é baseada em jQuery! Você irá precisar de uma biblioteca chamada sabiamente de Fastclick, disponível gratuitamente para download. Uma vez que o código esteja referenciado na página, sua aplicação é muito simples:
jQuery(document).ready(function($) {
$(function() {
FastClick.attach(document.body);
});
});
5. Substitua imagens para Retina Display
Telas com Retina Display podem ser trabalhadas usando um media query também:
/*CSS para outras telas*/
.portfolio_image {
background: url("images/portfolio_image.jpg");
}
/*media query e CSS para Retina Display*/
@media screen and (-webkit-device-pixel-ratio: 2) {
. portfolio_image {
background: url("images/[email protected]");
}
}
Entretanto, pode ser tedioso e trabalhoso ter que alterar manualmente todas as imagens de fundo. Felizmente, existe uma solução mais rápida e que também abrange as imagens que não são de fundo:
var pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;
if (pixelRatio > 1) {
$("img").each(function(idx, el){
el = $(el);
if (el.attr("data-src2x")) {
el.attr("data-src-orig", el.attr("src"));
el.attr("src", el.attr("data-src2x"));
}
});
}
Seu HTML ficaria assim:
6. Suavize as animações
Ocasionalmente, as animações em CSS não ficam tão legais no iPhone quanto deveriam. Para corrigir esse problema, o dispositivo deveria habilitar a aceleração via hardware. Felizmente, isso é possível de melhorar através de CSS:
.slide {
width: 100%;
height: 100%;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
7. Position: fixed e o teclado virtual
Nas primeiras versões do iOS, a combinação position:fixed não era suportada. Nas versões mais recentes, há suporte e funciona muito bem. Até que o teclado virtual é ativado.
Quando o teclado virtual do iPhone é ativado pelo usuário, o elemento com position:fixed muda de posição. O único paliativo no momento é aplicar position:absolute quando há um foco no input e retornar para a position:fixed quando o foco sai do input:
$(document)
.on('focus', 'input,textarea', function(e) {
$("#top_menu_wrap").css("position", "absolute");
})
.on('blur', 'input,textarea', function(e) {
$('#top_menu_wrap').removeAttr('style');
}
});
8. Não use o estado :hover dos elementos
No iPhone, os estilos aplicados ao estado :hover são exibidos no toque (já que dispositivos touch não interpretam o ato de “pairar” sobre elementos, obviamente). O problema é que estes estilos permanecem, mesmo se o usuário remover o dedo do elemento. O que gera problemas de usabilidade e lógica. Por enquanto, a melhor solução é mesmo não usar estilos para o estado :hover em seu CSS para iPhone.
9. Crie ícones para o iPhone
Imagine que seu usuário curtiu tanto o seu site ou achou ele tão útil que resolveu disponibilizá-lo em sua tela inicial. Maravilhoso, não? Que tal, então, oferecer um ícone apropriado para seu site, como o bom e velho favicon para navegadores desktop? O princípio é muito parecido.
No <head> do código fonte do seu documento, use o seguinte código (varia de acordo com o dispositivo-alvo, inclusive o tamanho da imagem):
Para sua comodidade, o iPhone automaticamente arredonda as bordas do seu ícone. Mas, se esta funcionalidade não for do seu agrado, ela também pode ser desabilitada usando o seguinte código:
10. Detectando o iPhone no PHP
A identificação do user-agent do iPhone no PHP é uma mão na roda: a partir daí, você já pode incluir uma folha de estilos customizada ou um arquivo de Javascript focado no dispositivo da Apple. Ou até criar uma versão mais leve do seu website, removendo elementos que não são necessários.
Você poderia codificar essa solução manualmente, mas é melhor e mais rápido utilizar uma das bibliotecas gratutias disponíveis: uma boa opção de classe é o Mobile Detect, enquanto usuários da plataforma WordPress podem se sentir mais confortáveis trabalhando com o plugin WP Mobile Detect.
