Página Camuflada com Iframe não fica Responsiva em iOS iPhone

Uma prática muito comum hoje em dia é camuflagem de Links. Um link camuflado é um link que fica sob o seu próprio dominio. Por exemplo, seu poderia camuflar o site da Hotmart.com.br para que ele abrisse no meu próprio domínio Andersonmakiyama.com

Links camuflados ajudam de diversas maneiras, mas não vou me estender aqui sobre isso, pois nesse artigo meu objetivo é mostrar como resolver um problema de Página Camuflada que não fica responsiva em dispositivos mobile que utilizam iOS, como por exemplo o nosso querido iPhone…

A melhor Ferramenta para gerenciar links camuflados é o Hot Links Plus, que traz em uma única ferramente dezenas de outras funções embutidas, como sistema de Cloak, Backredirect, Métricas, Tracker, Relatórios, Parâmetros, etc, etc…

E como eu sou desenvolvedor dessa ferramenta, notei que algumas páginas de venda não ficaram responsivas no iphone. Assim sendo fui pesquisar e fazer alguns testes, e depois de algumas horas descobri um “Hack”.

Página Camuflada com Iframe não fica Responsiva em iOS iPhone: RESOLVIDO

Fazendo uns testes aqui descobri um “hack”, que é um código javascript pra forçar a página a abrir responsiva mesmo camuflada nesses dispositivos…

Esse Código precisa ser colocado no html da página de Vendas, Advetorial, etc. Então se você usa estrutura própria, basta editar o código da página e inserir esse código no final da página, antes de fechar o do documento. Já se a página que você estiver trabalhando for a página do produtor, você teria de pedir ao produtor para por esse código na Página dele…

Segue o Código:

Mas o que é feito aí nesse código, Anderson? Bom, parte desse código eu encontrei na internet, e parte eu adaptei para chegar a isso aí. A função andmak_is_iOS faz apenas uma verificação se o atual dispositivo é um ‘iPad Simulator’,’iPhone Simulator’,’iPod Simulator’,’iPad’,’iPhone’ ou ‘iPod’. Então eu usei essa função para apenas injetar um css dinâmico quando se tratar de um dispositivo mobile com iOS…

Eu apenas peguei o valor da largura do screen com window.screen.width e no css configurei a largura do documento (body) com esse mesmo valor. Cheguei a essa ideia depois de rodar laguns testes e ver que essa propriedade exibia o valor real da largura da janela do dispositivo.

Então depois de ter o css montadinho, ele é inserido no campo head do documento, forçando o corpo do documento a ficar do tamanho da janela do dispositivo, mesmo este estando dentro de um Iframe.

Note duas coisas… Não é toda página que apresenta esse comportamento em iPhones, algumas abrem responsivamente sem nenhum problema… Note também que esse código é na verdade um “Hack”, ou seja, uma forma alternativa que encontrei para forçar a responsividade em iOS de Mobiles…

Ah! E lembre-se que você deve por esse código direto na página de vendas, advetorial ou artigo de conversão. Não vai adiantar por o código no link camuflado, pois não terá efeito algum sobre a página que é aberta dentro do iframe. E nos meus testes comprovei que o problema é na página que é aberta dentro do iframe, é ela que não fica responsiva, então é ela que deve ser forçada, e para isso o único jeito é editando o arquivo html e inserindo esse código dentro dele. Se a página que você estiver trabalhando estiver no site do produtor você terá duas alternativas: a primeira é você pedir ao produtor que adicione esse código na página dele, a segunda é você subir sua própria estrutura em seu próprio domínio, e aí você mesmo poderá colocar o código na página vsl.

Como testar Códigos e Responsividade em Diferentes dispositivos

Aqui vou mostrar um site onde você pode testar seus sites e scripts em diferentes dispositivos. Por exemplo, mesmo que você não use um iPhone, poderá rodar sua página para testar a responsividade dela nesse site.

Note que fiz um teste em vários sites que prometiam emular um iPhone com iOS, porém encontrei apenas um site que conseguiu realmente esse feito com perfeição.

Aqui estou a falar do site BrowserStack.com. Esse site oferece na verdade um serviço pago, onde é possível testar vários dispositivos e inclusive a versão deles… Contudo, assim que você cria uma conta você tem um acesso provisório que permite fazer algumas consultas no site.

Para quem, por exemplo, não tem o Android ou o iOS e quer testar seu site ou projeto nesses OS, vale a pena criar uma conta no site BrowserStack.

Esse site vai ajudar muito a testar a responsividade dos teus projetos, ele tem me ajudado bastante.

Bom, é isso! Fica a dica e até um próximo post!

Página Camuflada com Iframe não fica Responsiva em iOS iPhone
4.7 (94.12%) 34 votes