a meta viewport
Treinando transformações de elementos para aperfeiçoar a responsividade de sites já criados focamos nas modificações dos arquivos mas esquecemos aonde tudo começa, a meta viewport.
Os navegadores em smartphones tiveram que lidar com sites projetados com layouts de largura fixa para telas mais amplas. Por padrão, os navegadores para mobile assumiram que 980 pixels era a largura para a qual as pessoas estavam projetando, e eles não estavam errados.
Portanto, mesmo se você usasse um layout líquido, o navegador aplicaria uma largura de 980 pixels e, em seguida, dimensionaria a página da Web renderizada para a largura real da tela.
Se você estiver usando o design responsivo, precisará informar ao navegador para não fazer esse dimensionamento.
Você pode fazer isso com um elemento meta no cabeçalho da página da web:
<meta name="viewport" content="width=device-width, initial-scale=1">Existem dois valores, separados por vírgulas.
O primeiro é largura=largura do dispositivo. Isso informa ao navegador para assumir que a largura do site é igual à largura do dispositivo, em vez de assumir que a largura do site é de 980 pixels.
O segundo valor é escala inicial=1. Isso informa ao navegador quanto ou quão pouco dimensionamento deve ser feito. Com um design responsivo, você não quer que o navegador faça qualquer dimensionamento.
Com esse elemento meta no lugar, suas páginas da web estão prontas para serem responsivas.
Esse artigo foi mais objetivo e vale lembrar a importância de dominar dois princípios cada vez mais determinantes na criação de layouts que é o mobile first e a responsividade. Espero que tenha gostado. Deixe seu aplauso e até o próximo artigo.
