Criação de um site com zoom com unidades em

Recentemente, atualizamos o site da nossa empresa ( http://theagilemonkeys.com ). Quando estávamos na mesa de design, o que queríamos é que a experiência do site fosse a mesma, independentemente do tamanho da tela de nossos usuários. Não na forma “responsiva” das consultas de mídia, mas preservando os tamanhos relativos das coisas, qualquer que seja o tamanho real.

Então, passamos algum tempo pensando em como atingir esse objetivo, e a ideia que nos surgiu foi definir um tamanho de fonte “padrão” para o elemento do corpo e usar unidades relativas de tamanho de fonte como em para definir cada tamanho ou posição, apenas da seguinte maneira:

body {
  ...
  font-size: 10pt; // Any value here will be Ok, (spoiler alert: even none as it'll be set later by JS)
}

.example {
  position: relative;
  top: 10em;
  left: 1.89em; // Using floats allows extra-precision positioning
  width: 20em;
  height: 10em;
}

Assim que terminarmos nosso site usando unidades relativas ao tamanho da fonte, podemos testar como funciona abrindo o site com o inspetor do nosso navegador e alterando manualmente o tamanho da fonte do elemento do corpo. Valores maiores atuarão como um zoom-in e os menores como um zoom-out, então tudo está pronto, só temos que fazer isso ao vivo.

Você pode tomar o tamanho da tela da máquina usada para desenvolver o site como referência para a escala 1: 1, por exemplo, o tamanho da janela de visualização de uma janela cromada no Mac OS X é 1440x779px. Sabendo disso, podemos criar uma função JavaScript simples para calcular a escala para o tamanho da janela atual:

function zoom() {
  var $window = $(this),
      relX = ($window.width() / 1440), //We use our screen size as scale reference
      relY = ($window.height() / 779),
      rel;
  if (relX < relY) { //Always select the scale from the most shrinked axis
    rel = relX;
  } else {
    rel = relY;
  }
  $("body").css("font-size", "" + (10.0 * rel) + "pt"); // Here you use the default size you chosen for the body
};

$(function(){
  $(window).resize(zoom); // Set a listener to call zoom whenever the window is resized
  zoom(); // Call zoom after page is loaded
});

E isso é tudo! Simples, SECO, eficaz e sem obstrução. Enquanto você não redimensionar a tela nada será executado e quando você fizer a maior parte do trabalho de escala será feito automaticamente por CSS. A primeira vez que o vi funcionando foi tipo, “ei, nós criamos um site em flash com HTML, legal!”.

Deixe-nos seus comentários, adoraríamos ouvir suas idéias para alcançar o mesmo objetivo de maneiras melhores 🙂

Atualização: como @avetisk e @jessewilliamson notaram, usar essa técnica sobre a tag body pode desativar o zoom nativo do navegador, o que pode ser considerado um problema de acessibilidade. Assim que puder, tentarei melhorar este código para resolver esse problema e atualizar este post com a correção.