escala de reset / largura / zoom do Safari no iPhone usando JavaScript / onOrientationChange

Question

Estou exibir conteúdo diferente, dependendo de como o usuário está segurando sua / seu telefone usando a chamada onOrientationChange na tag body. Isso funciona muito bem - eu esconder um div ao fazer o outro visível.

O div no modo retrato olha grande em primeira carga. Eu uso isso para obter a escala direita / zoom:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

Mesmo que o conteúdo em modo retrato atropelado, a largura é correto e o usuário pode rolar para baixo. O display no modo paisagem é perfeito também. No entanto, se o conteúdo no modo paisagem exige que o usuário da rolagem para baixo, em seguida, quando o usuário retorna ao modo retrato, a tela é "zoom out" por assim dizer. Isso acontece se o usuário rolado para baixo, enquanto no modo paisagem.

Eu tentei muitas coisas diferentes para tentar obter a escala / zoom / largura da tela direita, mas sem sorte. Existe alguma maneira de fazer isso?

Agradecemos antecipadamente!

Answer 1

Aqui está o que eu uso para lidar com o zoom em meus meios-consultas:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">

A escala máxima é a coisa que o vendeu para mim. Isso significa que a transição de retrato para paisagem em um iPhone é realmente liso sem problemas de zoom em tudo ...

Answer 2

A "resposta" aceite acima não é realmente uma resposta, em que não permitindo qualquer zoom tudo é tão mau como pedir a um usuário IE para mudar para outro navegador. É terrível para acessibilidade. Você quer seu projeto para não fazer as coisas de zoom funk que a Apple tenha considerado ideal sobre a mudança de orientação da vista, mas você está deixando os usuários com deficiência na poeira. Altamente não é recomendado.

Tente usar consultas de mídia ou um gancho de js (Screen.Width, etc) para ajustar seu projeto automaticamente após a mudança de orientação. É por isso que esses atributos são expostos a nós como desenvolvedores.

Answer 3

Eu tive alguns problemas com os níveis de zoom mudança de paisagem para retrato, quando o conteúdo foi maior do que a janela de exibição. Definindo "minimum-scale = 1.0", resolveu este para mim.

Answer 4

Este trabalho não vai se você estiver executando um app web no Safari, mas eu acho que vai funcionar se você estiver usando um UIWebView dentro do seu próprio aplicativo.

Eu ainda não testei isso, mas não há uma maneira fácil de obter o seu javascript para falar com o lado objetivo-c do código em que ponto você teria acesso a coisas como o zoom da vista web.

Answer 5

Eu tive esse problema também, eu acho. Tente colocar um "escala máxima = 1,0" (e talvez um "minumum escala = 1.0" se você sentir como ele) no seu tag viewport. Isso pressupõe que você não quer que o usuário seja capaz de escala embora (que eu não)

Answer 6

Usando metatags para isso não funciona. Eu tentei todas as combinações de meta tags e eventos orientationchange e gesturechange possíveis, eu tentei tempos de espera e todos os tipos de fantasia javascript, então eu encontrei este: https://github.com/scottjehl/iOS-Orientationchange-Fix

através desta questão relacionada: Como faço para redefinir a escala / zoom de uma aplicação web em uma mudança de orientação no iPhone?

Nesse post, Andrew Ashbacher postou um link para o código escrito por Scott Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

Essa é uma solução envolveu muito bem em um IIFE assim você não precisa se preocupar com questões de nome de espaço.

Apenas soltá-lo no seu roteiro (não em document.ready() se você estiver usando jQuery) e viola!

Tudo que faz é desabilitar o zoom em eventos devicemotion que indicam que orientationchange é iminente. É a melhor solução que eu vi, porque ele realmente funciona e não desativa zoom.

EDIT: esta abordagem nem sempre é confiável, especialmente quando você está segurando o iPad em um ângulo. Além disso, eu não acho que este evento está disponível para gen 1 ipads

Answer 7

Você pode definir a propriedade user-scalable no atributo conteúdo. Tente isto:

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;">

A partir esta resposta :

Mas se você atribuir escalável pelo usuário = no seu website meios não permitem ampliar ou diminuir o zoom.