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?

— 755
fonte

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

Com encolher para ajustar = não

— davidjb
fonte

Sinto muito, mas ainda não entendo o que esse código faz. Você pode explicar de uma maneira diferente? Obrigado!

— Daniel Springer

@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

Ah entendo. Mas por que alguém gostaria que parte de seu conteúdo fosse ocultada em telas menores?

— Daniel Springer

@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

@avidjb Acho que isso foi corrigido com o iOS 11 mais recente. Não consigo reproduzir esse bug.

— Zeel Shah

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

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

Alterações na janela de visualização

Exemplo

Sem encolher para ajustar especificado

Com encolher para ajustar = não