Tiendo a usar esto:
<meta name="viewport" content="width=device-width">Aunque veo que esto se recomienda mucho:
<meta name="viewport" content="width=device-width, initial-scale=1">Esto significa que el navegador (probablemente) renderizará el ancho de la página al ancho de su propia pantalla. Entonces, si esa pantalla tiene 320 px de ancho, la ventana del navegador tendrá 320 px de ancho, en lugar de alejarse y mostrar 960 px (o lo que sea que haga ese dispositivo de forma predeterminada, en lugar de una metaetiqueta receptiva).
Nota: no use una metaetiqueta receptiva si su sitio web no está diseñado específicamente para ser receptivo y funcionar bien en ese tamaño, ya que empeorará la experiencia.
Hay más atributos que admite esta etiqueta:
| Propiedad | Descripción |
|---|---|
| ancho | El ancho de la ventana virtual del dispositivo. |
| ancho del dispositivo | El ancho físico de la pantalla del dispositivo. |
| altura | La altura de la “ventana virtual” del dispositivo. |
| altura del dispositivo | La altura física de la pantalla del dispositivo. |
| escala inicial | El zoom inicial al visitar la página. 1.0 no hace zoom. |
| escala mínima | La cantidad mínima que el visitante puede hacer zoom en la página. 1.0 no hace zoom. |
| escala máxima | La cantidad máxima que el visitante puede hacer zoom en la página. 1.0 no hace zoom. |
| escalable por el usuario | Permite que el dispositivo se acerque y aleje. Los valores son sí o no. |
En general, se recomienda que no evite el escalado, ya que es molesto y potencialmente un problema de accesibilidad.
Probablemente también quieras esto en tu CSS:
@-ms-viewport{
width: device-width;
}Es bueno saberlo: cambiar el valor de esta metaetiqueta con JavaScript funciona, la página reaccionará al nuevo valor. Saque toda la etiqueta y reemplácela, o cambie la content propiedad. No es una necesidad muy común, pero puede surgir.