Se você é um web designer, o bug conhecido comoO Viewpoint Scaling pode ter confrontado você, o que ocorre nos dispositivos Apple, como iPod, iPhone e iPad. Às vezes, quando giramos o dispositivo Apple da orientação retrato para a paisagem, o site aumenta o zoom, mostrando uma exibição com largura maior que a largura do dispositivo. Isso ocorre porque o designer definiu a largura da janela de exibição para a largura do dispositivo. Para ajudar você a ter uma idéia de como esse bug funciona, criamos uma página de amostra e giramos nosso iPad de retrato para paisagem.
Uma solução rápida para esse bug nos orienta a definir o"Escala máxima = 1" na metatag da viewport. Isso corrige o problema por enquanto, mas a página não pode mais ser ampliada porque corrigimos a largura máxima semelhante à largura do dispositivo.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Essa solução rápida não é exatamente a solução perfeita. Através do trabalho árduo de designers como @mathias, @cheeaun e @jdalton, agora temos um javascript que pode ser adicionado à seção <head> para obter uma solução permanente. Sob esta solução, a página permanecerá com capacidade de zoom.
<script type="text/javascript">
(function(doc) {
var addEvent = "addEventListener",
type = "gesturestart",
qsa = "querySelectorAll",
scales = [1, 1],
meta = qsa in doc ? doc[qsa]("meta[name=viewport]") : [];
function fix() {
meta.content = "width=device-width,minimum-scale=" + scales[0] + ",maximum-scale=" + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>Estas são as únicas soluções conhecidas que os designers criaram até agora. Mas se você tiver outro para corrigir esse bug, compartilhe conosco nos comentários.
Comentários