18.06.15

promovida@mae_MOBILE_01a

Olá pessoal! Montei meu primeiro tema responsivo wordpress! Peguei as informações de media queries, viewport, imagens responsivas, e fui aplicando e testando no site que estava desenvolvendo. Estava indo tudo bem quando chegou naquele terrível link: “clique aqui para carregar a versão desktop do site”.

“Pô, se o site é responsivo, ele se adapta ao dispositivo que está lendo ele. Não faz sentido abrir a versão completa do site no celular!”, diz um membro de um fórum de design responsivo…

Só que a vida não foi feita para programadores… o usuário QUER ver a versão completa do site! Quer ver o sidebar, os anúncios, etc… e tem que ter essa opção, mesmo para um site responsivo!

Depois de muito buscar na net consegui uma solução com jquery e viewport. Vamos lá.

O código padrão que usamos para o viewport é esse abaixo, certo?

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Então devemos forçar o tamanho do viewport para o celular dessa maneira:

<meta id="viewport" name="viewport" content="width=1200, initial-scale=0, maximum-scale=5.0, user-scalable=1" />

Para ter essa alteração do viewport, usei jQuery no fatídico link:

 <?php if(wp_is_mobile()){ ?>
 <a id="desktopswitch">clique aqui para retornar à versão mobile</a>
 <?php } ?>
<script type="text/javascript">
 $(document).ready(function() {
 $('#desktopswitch').on('click', function() {
 $('#viewport').attr('content','width=1200, initial-scale=0, maximum-scale=5.0, user-scalable=1'); 
$('html, body').animate({scrollTop:0}, 'slow'); return false; });
});
</script>
Share on FacebookTweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someone
comente 0

Deixe uma resposta

Design e programação: webonfocus

Orgulhosamente desenvolvido em WordPress

Hospedado em: Hostgator

UP!