O que é
Um iframe é uma forma de incorporar o conteúdo de uma página web dentro de outra — é o que torna possível colocar um vídeo do YouTube, um mapa do Google ou um widget de terceiros diretamente na tua própria página sem teres de construir essa funcionalidade tu mesmo. A maioria dos códigos de incorporação que copias e colas a partir destes serviços já vem com uma largura e altura fixas em pixels, dimensionadas para um ecrã de computador típico.
Esta verificação analisa se os iframes incorporados numa página estão preparados para se redimensionarem juntamente com o ecrã ("responsivos"), ou se ficam com esse tamanho fixo original, independentemente da largura real do ecrã do visitante.
Por que importa
Um mapa ou vídeo incorporado com um tamanho fixo de, por exemplo, 560×315 pixels funciona bem num ecrã de computador, mas pode facilmente ser mais largo do que um ecrã de telemóvel inteiro, forçando o mesmo tipo de deslocamento horizontal ou ficando visualmente cortado. Este é um problema comum e fácil de ignorar, precisamente porque o código de incorporação normalmente vem pré-escrito pela própria plataforma (YouTube, Google Maps) exatamente como é colado, sem qualquer indicação óbvia de que precisa de ajustes adicionais para uso móvel.
Um embed avariado também é desproporcionalmente mais notório do que um pequeno problema de texto — um mapa cortado a meio ou um leitor de vídeo que transborda do ecrã é imediata e visualmente óbvio para qualquer visitante que chegue a essa parte da página no telemóvel.
Como corrigir
- Identifica todos os iframes incorporados no teu site — normalmente vídeos, mapas ou widgets de terceiros — e verifica como aparecem num telemóvel real.
- Envolve o iframe num contentor cuja largura é controlada em percentagem, com o próprio iframe definido para preencher esse contentor (
width: 100%), em vez de usar a sua largura fixa original em pixels. - Para incorporações do YouTube em particular, uma abordagem comum é usar um invólucro com uma proporção fixa (como 16:9) que dimensiona o vídeo proporcionalmente em qualquer largura de ecrã — existem muitos exemplos de código gratuitos para este padrão exato.
- Se usares um criador de sites, verifica se existe um bloco integrado de "incorporação" ou "vídeo" em vez de código iframe em bruto — estes costumam já ser responsivos por predefinição.
- Verifica novamente a incorporação num telemóvel depois, para confirmar que se redimensiona corretamente em vez de transbordar.