Colocacion del @viewport

[mensajeescrito]

Una pregunta para que una web se vea bien en los dispositivos moviles hay que usar

@viewport y sus correspondientes etiquetas.


Pero donde se coloca?, en el mismo documento html, php etc o se podria colocar tambien en la hoja de estilos css.?

Es que no se si se coloca en el css pudiera no hacer efecto.


estoy colocando esto:

¿estaria bien?:

Código CSS:

@-webkit-viewport { width: device-width; initial-scale:1.0; user-scalable:yes; }
        @-moz-viewport { width: device-width; initial-scale:1.0; user-scalable:yes; }
        @-ms-viewport { width: device-width; initial-scale:1.0; user-scalable:yes; }
        @-o-viewport { width: device-width; initial-scale:1.0; user-scalable:yes; }
        @viewport { width: device-width; initial-scale:1.0; user-scalable:yes; }
 

para que la web detecte el ancho de los dispositivos moviles y se adapte a cada ancho segun varie uno u otro.

y para que se a escalable por el usuario.

¿esta bien el codigo?.


Y una ultima pregunta ¿por que cuando amplio con el zoom y vuelvo a entrar en la web me sale con el zoom ampliado y no se reabre con su tamaño original que es mas pequeño que el zoom?

¿hay algun antidoto en forma de etiqueta para ello?

gracias de antemano.

[nosolocss]

El viewnport suele ir en el head del documento html, pero con esa sentencia lo único que estas haciendo es que los dispositivos no reescalen la web al tamaño de su pantalla. Digamos que la deja preparada para definir desde el CSS como se vera la web en cada resolución.

En el CSS seria algo así:

Código CSS:

@media screen and (max-width: 650px) {
//aqui va el código css que definira la web para esa resolución
}
 

Y creo que los modificadores de cada navegador (-moz-,-webkit-, etc..) no son necesarios en este caso.

Espero haberte aclarado algo.

Un saludo.

[pzin]

De momento es casi más seguro ponerlo como meta-etiqueta en head en lugar de usar @viewport.

Código HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">