A meta tag da viewport é realmente necessária?

Criei alguns sites responsivos, mas sou bastante novo no desenvolvimento de sites responsivos. No meu CSS, 99% dos meus valores estão em ems ou porcentagens. Estou usando consultas de mídia (max-width e max-device-width) para fazer alterações de layout. Eu não incluí uma metatag da viewport e ela funciona perfeitamente no iOS, em vários telefones e tablets Android que testei e em todos os navegadores de desktop.

Adicionando uma meta tag quebra meu site. Estou fazendo algo errado ou fazendo algo certo para não precisar incluí-lo? Estou confuso sobre o porquê parece ser uma prática recomendada, já que está quebrando minhas coisas.

Estou esquecendo de algo?

    Nos sistemas operacionais de desktop, as viewports do navegador têm um número fixo de pixels de largura e o conteúdo da página da Web é renderizado para eles como estão.

    Começando com o Safari no iOS (ou o que quer que devêssemos estar chamando de iOS naquela época), as viewports do navegador móvel eram “virtuais”. Embora a porta de visualização só possa ocupar (por exemplo) 320 pixels de espaço físico na interface, o navegador cria uma viewport “virtual” que é maior (980 pixels de largura por padrão no iOS, eu acho) e renderiza conteúdo lá, em seguida, amplia essa janela virtual até que ela se ajuste aos pixels físicos reais disponíveis na canvas do dispositivo.

    A metatag da viewport permite que você informe ao navegador do celular qual o tamanho que essa viewport virtual deve ter. Isso geralmente é útil se você não estiver realmente alterando o design do seu site para dispositivos móveis e renderizar melhor com uma viewport virtual maior ou menor. (Acredito que 980 pixels foram escolhidos como padrão porque fizeram um bom trabalho em renderizar muitos sites de alto perfil em 2007; para qualquer site, um valor diferente pode ser melhor.)

    Pessoalmente, eu sempre uso para que a viewport virtual corresponda às dimensões do dispositivo. (Observe que initial-scale=1 parece ser necessário para fazer com que o viewport virtual se adapte ao modo paisagem no iOS .) Isso faz com que os navegadores móveis se comportem como os navegadores de desktop, o que eu estou acostumado.

    Sem uma meta tag de viewport, seu site será renderizado na viewport virtual padrão do dispositivo. Eu não acho que isso seja necessariamente um problema, especialmente se todas as suas unidades forem ems ou porcentagens como você diz. Mas pode ser um pouco confuso se você precisar pensar em pixels a qualquer momento, especialmente porque diferentes navegadores podem ter viewports virtuais padrão de tamanhos diferentes. Também pode ser confuso para os mantenedores subseqüentes se eles não entenderem a abordagem.

    Eu imagino que você definiu o tamanho da fonte base bastante grande, de modo que seja legível? Você poderia criar um link para um dos sites que criou assim, para que possamos ver um exemplo?

    Sem o visor, o seu dispositivo utiliza uma janela de visualização virtual que, por predefinição, é efetivamente uma versão reduzida do seu site, isto é, cerca de 980 px no iPhone e 800 px no andriod. Assim que você definir a janela de exibição e desativar esse zoom, o dispositivo tratará o site como deveria e medirá cerca de 480px de largura ou 320px, dependendo do dispositivo e da orientação, etc.

    Recursos completos aqui abaixo, meu conselho é que sempre que você trabalhar com o responsivo e o dispositivo móvel, defina sempre a viewport primeiro. É a melhor maneira de normalizar o zoom do dispositivo e garantir que seu site seja exibido usando uma largura real do dispositivo, em oposição a qualquer largura virtual.

    http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

    Então, para responder minha própria pergunta. Não é necessário.

    Você pode usar consultas de mídia de largura mínima e máxima para estilizar a versão da área de trabalho em pontos de interrupção específicos.

    Em seguida, você atualiza principalmente o tamanho da fonte e outras propriedades especificamente para tablets e telefones. Como eu disse, isso é basicamente aumentar o tamanho da fonte para facilitar a leitura.

    Este método, no entanto, tem um grande problema de manutenção.

    A metatag da viewport permite que você simplesmente use max e min-width que abrangem desde desktops até dispositivos móveis.

    Não para todos os dispositivos, mas sim para celulares. Navegadores móveis processam páginas em uma “janela” virtual, a viewport que geralmente é mais larga que a canvas, portanto eles não precisam espremer cada layout de página em uma pequena janela (por isso, ele quebra alguns sites não otimizados para dispositivos móveis e os usuários precisam zoom). O Mobile Safari introduziu a “metatag da viewport” para permitir que os desenvolvedores da Web controlem o tamanho ea escala da viewport. Agora, todos os navegadores de dispositivos móveis suportam essa tag, mesmo que ela não faça parte de nenhum padrão da web . Um site típico otimizado para celular deve conter a seguinte tag:

      

    A propriedade width controla o tamanho da viewport. Largura da canvas em pixels CSS em uma escala de 100%. A propriedade de escala inicial controla o nível de zoom quando a página é carregada pela primeira vez. As propriedades de escala máxima, escala mínima e escalonável pelo usuário controlam como os usuários podem ampliar ou reduzir a página.

    https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19

    Você deve definitivamente usar tags de viewport , pois eles têm a capacidade de tornar a vida dos desenvolvedores web infinitamente mais simples. Eles permitem que você controle facilmente as dimensões exatas de renderização e / ou os níveis de zoom de QUALQUER canvas (mesmo na área de trabalho, se desejar). Isso torna a construção de um site para qualquer dispositivo um pedaço de bolo. Mas saiba que com grande poder vem uma grande responsabilidade. Use este poder com sabedoria (e não desative o zoom).

    Você ainda pode usar a metatag da porta de visualização para otimizar a resolução para a exibição do dispositivo e capacitar o usuário para o Zoom:

      

    Com uma escala máxima definida, você pode controlar como o usuário faz zoom. Acho que deveríamos ter essa opção habilitada pois mesmo com um site responsivo eu desejo Zoom, saiba que já é tão intuitivo que se torna expectativa.

    Sim, é uma tag necessária para o desenvolvimento de sites responsivos.No entanto, o uso da tag não ajuda você, mas eles definitivamente facilitam o desenvolvimento de sites responsivos, permitindo que você controle o tamanho do conteúdo visível da sua página da Web. .