Cuando trabajamos en un nuevo diseño web una de las cosas a tener en consideración es el diseño responsivo; cada vez más personas utilizan navegadores móviles y hacer que los visitantes tengan que hacer zoom para leer los textos es un problema de experiencia de uso.
El diseño responsivo es cuando una página adapta su forma al ancho y alto del dispositivo en el cual se está mostrando. Esto se logra utilizando media queries en CSS.
El problema viene cuando intentamos probar estos diseños en un dispositivo móvil. En general veremos que no se aplican los media queries que deberían. Esto no es un problema con la sintaxis de CSS, sino que los navegadores móviles creen que son navegadores de escritorio hasta que alguien les dice lo contrario. Por defecto, los dispositivos iOS muestran hasta 980 píxeles, mientras que los Android muestran hasta 800 píxeles. Esto es un beneficio, ya que las páginas que no estén optimizadas para móviles se podrán ver en una pantalla pequeña.
Si tu página está optimizada para móviles esto arruina los esfuerzos. Para poder solucionarlo, hay que agregar una etiqueta llamada viewport.
