Efeitos colaterais da remoção de “width = width do dispositivo” da metatag da viewport quando a “inicial-scale = 1.0” também está definida

Embora a <meta name="viewport">tag não seja padronizada, "é respeitada pela maioria dos navegadores de celular devido ao domínio de fato".

Uma desvantagem de não ser um verdadeiro padrão da Web é a documentação detalhada não está tão disponível quanto os outros padrões. O CSS Working Group tem uma especificação para isso, e é isso que estou usando principalmente como um trabalho autoritário.

Minha pergunta principal é:

Qual seria a diferença percebida entre as seguintes declarações?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="initial-scale=1.0">

Em alternativa, quais são as diferenças entre estas duas regras do CSS do @viewport :

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

Como cheguei a essas @viewporttraduções:

width=device-width para min-width: extend-to-zoom; max-width: 100vw;

O documento do nível 1 do módulo de adaptação de dispositivos CSS declara:

As propriedades da viewport widthe são convertidas em e descritores, configurando o valor / para e o valor / para o comprimento da viewport.height<META>widthheightmin-widthmin-heightextend-to-zoommax-widthmax-height

Eles também dão um exemplo :

Este <META>elemento:

<meta name="viewport" content="width=500, height=600">

traduz em:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

O widthdescritor abreviado é descrito como:

Este é um descritor abreviado para definir ambos min-widthe max-width. Um <viewport-length>valor definirá ambos min-widthe max-widthpara esse valor. Dois <viewport-length>valores serão definidos min-widthpara o primeiro e max-widtho segundo.

Portanto, é lógico que isso width: extend-to-zoom 500px;é equivalente a min-width: extend-to-zoom; max-width: 500px;.

Isso deixa apenas a 100vwparte. Na seção 10.4 , eles explicam:

device-widthe device-heighttraduza para 100vw e 100vh respectivamente

Então, finalmente, podemos ver como width=device-widthé traduzido min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 para zoom: 1.0; width: extend-to-zoom;

Este é um exemplo literal :

Este <META>elemento:

<meta name="viewport" content="initial-scale=1.0">

traduz em:

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

A outra pergunta que tenho aqui é: qual é exatamente o extend-to-zoomvalor?

A documentação e o procedimento de resolução são difíceis de entender. Se alguém puder me apontar para mais alguns exemplos sobre isso, seria muito apreciado.

Além de tudo acima, montei um site rápido - https://romellem.github.io/temp-site/viewport/ - para testar algumas configurações de viewport.

Nomeadamente:

• content = "width = largura do dispositivo, escala inicial = 1.0"
• content = "escala inicial = 1.0"

Isso pode ajudar no teste.

Antes de nos aprofundarmos no que você está perguntando, vamos revisar um pouco sobre por que a viewportmetatag existe em primeiro lugar. Aqui está o que eu recolhi.

Por que precisamos da viewporttag?

Uma janela de visualização é uma área em que o conteúdo da web pode ser visto. Normalmente, a página renderizada (conteúdo da Web) é maior que a janela de visualização. Como resultado, geralmente usamos barras de rolagem para ver o conteúdo oculto (porque a janela de exibição não pode exibir tudo). Citado no Nível 1 do Módulo de adaptação de dispositivos CSS :

A janela de visualização estreita é um problema para documentos projetados para ficar bem em navegadores de desktop. O resultado é que os fornecedores de navegadores móveis usam uma inicial fixa que contém um tamanho de bloco diferente do tamanho da porta de visualização e próximo ao de uma janela típica do navegador de desktop. Além de rolar ou deslocar, o zoom costuma ser usado para alternar entre uma visão geral do documento e ampliar áreas específicas do documento para ler e interagir.

Em dispositivos móveis (e outros dispositivos menores), o bloco inicial contém geralmente maior que a janela de visualização. Por exemplo, um dispositivo móvel com largura de tela 640pxpode ter um bloco inicial de 980px. Nesse caso, o bloco inicial de contenção é reduzido para 640pxque possa ser ajustado na tela do celular. Essa 640pxlargura (largura da tela) é o que se chama initial-widthda janela de visualização que será pertinente à nossa discussão.

Então .... Por que precisamos dessa viewporttag? Hoje em dia, temos consultas de mídia que nos permitem projetar para dispositivos móveis. No entanto, essa consulta de mídia depende da largura da janela de exibição real . Em dispositivos móveis, o agente do usuário estiliza automaticamente o tamanho da viewport inicial para um tamanho fixo diferente (geralmente maior que o tamanho da viewport inicial). Portanto, se a largura da viewport de um dispositivo móvel for fixa, as regras CSS usadas nas consultas de mídia não serão executadas simplesmente porque a largura da viewport nunca muda. Usando a viewporttag, podemos controlar a largura real da janela de exibição (depois de ser estilizada pelo UA). Citado em MDN :

No entanto, esse mecanismo não é tão bom para páginas otimizadas para telas estreitas usando consultas de mídia - se a viewport virtual for de 980px, por exemplo, as consultas de mídia com 640px ou 480px ou menos nunca serão usadas, limitando a eficácia de tais técnicas de design responsivo.

Observe que a viewporttag também pode alterar a altura real da viewport, não apenas a largura

viewport Tag width

O widthem uma viewporttag é traduzido para max-widthna @viewportregra. Quando você declara o widthas device-width, ele é traduzido 100%na @viewportregra. O valor da porcentagem é resolvido com base na initial-widthjanela de exibição. Portanto, se ainda estamos usando o exemplo acima, o valor max-widthserá resolvido 640px. Como você descobriu, isso especifica apenas o max-width. O min-widthserá automaticamente extend-to-zoom.

extend-to-zoom

Sua pergunta foi: qual é exatamente o valor da extensão para zoom ? Pelo que eu deduzi, é o valor usado para suportar a viewport se estendendo para caber na área de visualização em um determinado nível de zoom. Em outras palavras, é um valor de tamanho da janela de visualização que muda com base no valor de zoom especificado. Um exemplo? Dado que o max-zoomvalor da folha de estilo do UA é 5.0e o initial-widthé 320px, <meta name="viewport" content="width=10">será resolvido com uma largura real inicial de 64px. Isso faz sentido, porque se um dispositivo tiver apenas 320 px e puder apenas ampliar 5xo valor normal, o tamanho mínimo da viewport seria 320px divided by 5, o que significa mostrar apenas 64 px por vez ( e não 10pxporque isso exigiria o zoom de 32x!). Esse valor será usado pelo algoritmo para determinar como estender (alterar) os valores min-widthe max-width, que desempenharão um papel na determinação da largura real da janela de exibição.

Juntando tudo

Então, essencialmente, qual é a diferença entre <meta name="viewport" content="width=device-width, initial-scale=1.0">e <meta name="viewport" content="initial-scale=1.0">? Simplesmente refaça as etapas do algoritmo ( isto e isto ). Vamos fazer o último (aquele sem widthatributo) primeiro. (Vamos assumir que o initial-widthda viewport é 640px.)

• widthnão está definido, isso resulta max-widthe min-widthpermanece extend-to-zoomna @viewportregra.
• initial-scaleé 1.0. Isso significa que o zoomvalor também é1.0
• Vamos resolverextend-to-zoom . Passos:
  1. extend-zoom = MIN(zoom, max-zoom). A MINoperação resolve para o valor que não é auto. Aqui, zoomé 1.0e max-zoomé auto. Isso significa que extend-zoomé1.0
  2. extend-width = initial-width / extend-zoom. Isso é facil; divida 640 por 1. Você recebe extend-widthé igual a640
  3. Como extend-zoomnão é auto, pularemos para a segunda condicional. max-widthé extend-to-zoom, de fato , isso significa que max-widthserá definido como extend-width. Portanto,max-width = 640
  4. min-widthé também extend-to-zoom, isso significa definir min-widthcomo max-width. Nós temosmin-width = 640
• Depois de resolver os valores nãoauto (ou seja, os extend-to-zoom) para max-widthe min-width. Podemos prosseguir para o próximo procedimento . Como min-widthou max-widthnão auto, usaremos o primeiro ifno procedimento, configurando assim a viewport real inicial widthcomo MAX(min-width, MIN(max-width, initial-width)), o que equivale a MAX(640, MIN(640, 640)). Isso resolve 640para sua viewport real inicialwidth
• Passando para o próximo procedimento . Nesta etapa, widthnão é auto. O valor não é alterado e terminamos com a viewport real widthde640px

Vamos fazer o primeiro.

• widthestá definido, isso resulta em max-widthestar 100%( 640pxno nosso caso) e min-widthestar extend-to-zoomna @viewportregra.
• initial-scaleé 1.0. Isso significa que o zoomvalor também é1.0
• Vamos resolverextend-to-zoom . Se você seguir as etapas com cuidado (quase o mesmo que acima), você terminará com um max-widthde 640pxe um min-widthde 640px.
• Você provavelmente pode ver o padrão agora. Obteremos a largura real da janela de visualização de 640px.

Então, qual é a diferença percebida? Essencialmente nenhum . Ambos fazem a mesma coisa. Espero que minha explicação ajude ;-) Se algo estava errado, diga-me.