O que o meta-atributo de janela de visualização encolher para ajustar faz?

143

Estou tendo problemas para encontrar documentação para isso. É específico do Safari?

Houve um erro recente no iOS 9 ( aqui ), cuja solução está sendo adicionada shrink-to-fit=noà meta da viewport.

O que faz este código?

html safari webkit ios9 viewport 755
fonte

Respostas:

193

É específico do Safari, pelo menos no momento da escrita, sendo introduzido no Safari 9.0. Na seção "O que há de novo no Safari?" documentação para o Safari 9.0 :

Alterações na janela de visualização

As metatags da viewport usando "width=device-width"fazem com que a página seja reduzida para caber no conteúdo que ultrapassa os limites da viewport. Você pode substituir esse comportamento adicionando "shrink-to-fit=no"à sua metatag como mostrado abaixo. O valor agregado impedirá que a página seja dimensionada para se ajustar à viewport.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Em resumo, adicionar isso à meta tag da viewport restaura o comportamento anterior ao Safari 9.0.

Exemplo

Aqui está um exemplo visual trabalhado que mostra a diferença ao carregar a página nas duas configurações.

A seção vermelha é a largura da viewport e a seção azul é posicionada fora da viewport inicial (por exemplo left: 100vw). Observe como no primeiro exemplo a página é ampliada para caber quando shrink-to-fit=noé omitida (mostrando o conteúdo fora da janela de exibição) e o conteúdo azul permanece fora da tela no último exemplo.

O código para este exemplo pode ser encontrado em https://codepen.io/davidjb/pen/ENGqpv .

Sem encolher para ajustar especificado

Sem encolher para ajustar = não

Com encolher para ajustar = não

Com encolher para ajustar = não

davidjb
fonte
2
Sinto muito, mas ainda não entendo o que esse código faz. Você pode explicar de uma maneira diferente? Obrigado!
Daniel Springer
3
@Dani Por padrão, o Safari reduzirá o zoom de uma página para caber em qualquer conteúdo que ultrapasse a janela de visualização (o primeiro exemplo mostra a área azul como visível; está excedendo). A especificação shrink-to-fit=noevita esse comportamento, deixando o nível de zoom sozinho e deixando o conteúdo excedente fora da tela. Experimente o exemplo do Codepen no seu iDevice (ou iOS Simulator) e tente alterar a configuração. Talvez ver a mudança interativamente ajude.
Davidjb 10/10
2
Ah entendo. Mas por que alguém gostaria que parte de seu conteúdo fosse ocultada em telas menores?
Daniel Springer
7
@Dani Vários motivos, mas exemplos rápidos são controles deslizantes / carrosséis que colocam conteúdo fora da janela de exibição ou outro conteúdo não responsivo grande (por exemplo, imagens / tabelas) que, de outra forma, estouraria e faria com que o restante da página ficasse pequeno com o padrão shrink-to-fitcomportamento. Com shrink-to-fit=no, a página permanece no tamanho esperado, deixando o conteúdo exceder a janela de visualização. Um usuário pode (normalmente) ainda rolar ou reduzir o zoom para ver o conteúdo excedente, mas a janela de exibição inicial corresponde ao tamanho do dispositivo.
Davidjb
2
@avidjb Acho que isso foi corrigido com o iOS 11 mais recente. Não consigo reproduzir esse bug.
Zeel Shah
12

Como estatísticas sobre o uso do iOS, indicando que o uso do iOS 9.0-9.2.x está atualmente em 0,17%. Se esses números são realmente indicativos do uso global dessas versões, é mais provável que seja seguro remover o termo-ajuste da metatag da viewport.

Após 9.2.x. O IOS remove essa verificação de tag em seu navegador.

Você pode verificar esta página https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html

GGGin
fonte