O que é viewport
Os navegadores móveis colocam a página em uma janela virtual (viewport). Geralmente, a janela virtual (viewport) é mais larga que a tela, para que cada página da web não precise espremer cada página da web em uma janela muito pequena (isso destruirá o layout da página da web que não é otimizada para navegadores móveis). Os usuários podem ver diferentes partes da página da web através de panning e zoom. A versão móvel do Safari Browser introduziu recentemente a meta -tag do Viewport, que permite que os desenvolvedores da Web controlem o tamanho e o zoom da viewport, e outros navegadores móveis também o suportam basicamente.
Noções básicas de viewport
A meta tag de viewport de uma página comumente usada otimizada para páginas da web móvel é aproximadamente a seguinte:
<meta nome = conteúdo da viewport = largura = largura do dispositivo, escala inicial = 1, escala máxima = 1 ″>
Largura: controla o tamanho da viewport, que pode ser especificado se 600, ou um valor especial, como a largura do dispositivo, for a largura do dispositivo (unidades dos pixels do CSS quando escaladas para 100%.
Altura: corresponde à largura, especifique a altura.
Escala inicial: escala inicial, ou seja, a taxa de escala quando a página é carregada pela primeira vez.
Escala máxima: a escala máxima que permite ao usuário escalar.
Escala mínima: a escala mínima que permite ao usuário escalar.
Scalable: o usuário pode escalar manualmente
Algumas perguntas sobre a viewport
A Viewport não é apenas um atributo exclusivo no iOS, mas também uma viewport no Android e WinPhone. O problema que eles desejam resolver é o mesmo, ou seja, ignorar a resolução real do dispositivo e diretamente através do DPI, redefinindo a resolução entre o tamanho físico e o navegador, que não tem nada a ver com a resolução do dispositivo. Por exemplo, você pode obter um iPhone3 GS com 3,5 polegadas-320 * 480, iPhone4 com 3,5 polegadas-640 * 960, iPhone4 com 9,7 polegadas-1024 * 768 e iPad2 com diferentes resoluções e tamanhos físicos, você pode definir o visualizador para fazer com que eles tenham a mesma ressolução na sobrinha. Por exemplo, seu site tem 800px de largura, você pode definir a largura = 800 da viewport para fazer com que seu site exiba seu site nesses três dispositivos diferentes, apenas uma tela cheia.
Acredito que todo aluno que tem um pouco de entendimento do viewport já deveria ter entendido o conhecimento acima. Este não é o ponto em que quero falar hoje. O que eu quero ilustrar são algumas das diferenças no desempenho da viewport no iOS e no Android.
Ao procurar o conhecimento on -line sobre a viewport, são basicamente todas as seguintes informações:
<meta nome = conteúdo do viewport = largura = largura do dispositivo, escala inicial = 1,0, escala máxima = 1,0, escala mínima = 1,0, scalable = não />
Esse código significa que a largura da viewport é igual à resolução real no dispositivo físico e não permite que o usuário escala. É assim que os principais aplicativos da Web em Yidu são definidos. Sua função é abandonar deliberadamente a visualização e não escalar a página. Dessa forma, o DPI deve ser o mesmo que a resolução real no dispositivo. Sem qualquer escala, a página da web parecerá mais alta e mais delicada. Os alunos que jogam PS devem saber o que se tornará quando você zoom uma foto de 1000 * 1000 diretamente para 500 * 500 pontos, certo? A distorção da imagem não deve ser escapada.
Mas o aplicativo que eu quero fazer é o oposto e ele precisa usar a viewport e o zoom. Não importa qual seja a resolução real ou qual é o tamanho físico, espero que haja uma resolução unificada no navegador e que o usuário não possa aumentar o zoom. Os dispositivos que eu costumava testar são: iPhone4, iPad2, HTC G11, Aquos Phone (sistema Android), ASUS Android Pad, Dell Winphone e encontrei os seguintes problemas ao longo do caminho:
1) Se a viewport estiver definida sem exibição, a largura padrão será 980. Se todos os elementos da página forem inferiores a 980, a largura será 980. Se a largura da página exceder 980, a largura será igual à largura máxima. Em resumo, a página inteira pode ser exibida da esquerda para a direita por padrão. Se você definir a viewport, por exemplo, basta definir scalable = não, por exemplo <meta name = viewport content = user-scalable = não />, então a largura do iOS ainda será exibida em 980 (ou seja, será escalonada por DPI por padrão), mas não será mais escalonada no Android e o WinPhone.
2) Para os dispositivos iOS, a configuração da largura pode entrar em vigor, mas para o Android, a largura da configuração não entrará em vigor. A taxa de escala do DPI é calculada automaticamente pela largura que você definiu e pela resolução real que você definiu. No entanto, no Android, sua largura definida é inválida. O que você pode definir é um campo especial-densidade-densidadeDPI, ou seja, existem três variáveis: largura do navegador, largura real do dispositivo e DPI. Vamos simplesmente usar uma fórmula para expressar a relação entre eles (não relacionamentos reais, basta usá -la para uma breve explicação), largura real * dpi = largura do navegador, aqui as três variáveis, a largura real do dispositivo é um valor conhecido que não podemos operar e podemos definir uma das outras variáveis para afetar a outra. No iOS, o que podemos mudar é a largura do navegador, o DPI é gerado automaticamente e, no Android, o que podemos alterar é o DPI e a largura do navegador é gerada automaticamente. Para o Android, não importa como definimos a largura, isso não terá impacto na largura do navegador.
PS: Aqui vou falar sobre outro problema estranho: no G11 da HTC (eu só tenho este para o telefone da HTC e nenhum outro teste), se o DPI estiver definido sem exibir largura, scalable = NO não tem efeito, ou seja, não, <meta name = viewport content = TargetDpi = 300, Screat = NO. Precisamos definir o valor de largura exibido. Embora esse valor não tenha nenhum impacto na resolução da tela do navegador no Android (ainda terá um impacto no iOS), ainda precisamos defini-lo, e esse valor deve ser maior que 320. Se for menor ou igual a 320, escalável do usuário = Não não pode ser eficaz. Esse problema aparece apenas no telefone G11 da HTC e não existe esse problema no telefone Aquos. Compatível com o Android é realmente uma dor de cabeça @_ @. Não sei quantas armadilhas estarão no futuro. No WinPhone, o resultado é ainda mais estranho: eu defino um valor maior que 480 para a largura da viewport e o usuário scalable = Não falhará. Se um valor menor que 480, Scalable = Não entrará em vigor. Mas, não importa quanto valor eu defina a largura da viewport, ele não tem o efeito na largura real exibida pelo WinPhone, nem tem o efeito por meio do alvo-densidadeDPI. Defina a largura, se for menor que 480, a tela aumentará o zoom, mas a escala de redução é completamente diferente do que eu esperava. Não sei qual a regra em que ela está ampliada. Não sei se isso é um problema com o WinPhone ou um problema com a implementação da Dell.
3) Este artigo deve estar diretamente relacionado ao artigo anterior: quando o dispositivo iOS é horizontal e vertical, ele ajustará automaticamente o DPI. Seja horizontal ou vertical, pode garantir que a largura do navegador seja igual ao valor definido na viewport. Portanto, quando as telas horizontais e verticais são telas horizontais e verticais, o tamanho do conteúdo exibido na página será dimensionado automaticamente. Quando os telefones Android são telas horizontais e verticais, o DPI não será alterado e, quando as telas horizontais e verticais, a página da web não será ampliada. Por esse motivo, o iOS pode garantir que nenhuma barra de rolagem seja gerada nas páginas horizontais e verticais, e a tela cheia seja exibida, mas o Android não pode garantir isso. Se as telas horizontais e verticais não puderem estar cheias e vice -versa.
4) Para os dispositivos iOS, se a tela de largura for definida e a posição mais ampla da página exceder a largura, a largura for inválida e ainda será exibida na largura mais ampla (não haverá barra de rolagem). Mas um problema muito estranho ocorrerá no momento. Depois de alternar a tela horizontal e vertical do seu telefone várias vezes, você descobrirá que sua página aumentou automaticamente e uma barra de rolagem aparece, mas, de fato, a largura aumentada não tem nada a ver com a largura que você definiu. Para evitar que isso aconteça, você precisa definir a largura da largura como maior que a parte mais larga da página ou a mesma.