Eu costumo usar isso:
Embora eu veja que isso é muito recomendado:
Isso significa que o navegador (provavelmente) renderizará a largura da página na largura de sua própria tela. Portanto, se a tela tiver 320px de largura, a janela do navegador terá 320px de largura, em vez de diminuir o zoom e mostrar 960px (ou o que quer que o dispositivo faça por padrão, em vez de uma metatag responsiva).
Observação: não use uma metatag responsiva se seu site não for projetado especificamente para ser responsivo e funcionar bem nesse tamanho, pois isso tornará a experiência pior.
Existem mais atributos que esta tag suporta:
| Propriedade | Descrição |
|---|---|
| largura | A largura da janela de visualização virtual do dispositivo. |
| largura do dispositivo | A largura física da tela do dispositivo. |
| altura | A altura da “janela de visualização virtual” do dispositivo. |
| altura do dispositivo | A altura física da tela do dispositivo. |
| escala inicial | O zoom inicial ao visitar a página. 1.0 não faz zoom. |
| escala mínima | A quantidade mínima que o visitante pode ampliar na página. 1.0 não faz zoom. |
| escala máxima | A quantidade máxima que o visitante pode ampliar na página. 1.0 não faz zoom. |
| escalável pelo usuário | Permite que o dispositivo aumente e diminua o zoom. Os valores são sim ou não. |
Geralmente, é recomendado que você não evite o dimensionamento, pois isso é irritante e potencialmente um problema de acessibilidade.
Você provavelmente também vai querer isso no seu CSS:
@-ms-viewport( width: device-width; )É bom saber: alterar o valor desta metatag com JavaScript funciona, a página reagirá ao novo valor. Retire a tag inteira e substitua ou altere a contentpropriedade. Não é uma necessidade super comum, mas pode surgir.