Xitrus está alojado en:
La meta-etiqueta Viewport fue creada por Apple para el iPhone, pero rápidamente se a convertido en un estándar soportado por la mayoría de los dispositivos móviles (smartphones, tablets y parte de los móviles de gama media y baja).
Esta etiqueta nos permite elegir como se mostrará nuestra página en los navegadores de estos dispositivos, pudiendo especifica el ancho que tendrá la página dentro del navegador, el nivel de zoom que podemos hacer... lo que nos puede ayudar a crear diseños adecuados para móviles y perfeccionar nuestro responsive design (ya que sin esta etiqueta es el navegador el que elige como mostrarlo, y puede que no sea la mejor forma).
Su uso es totalmente necesario cuando tenemos un diseño responsivo, ya que sino puede que el navegador de nuestro dispositivo lo muestre como en un navegador de PC, y entonces no serviría de nada haber hecho la adaptación (más abajo especificare que parámetros debemos de poner en el Viewport para diseños responsivos). Para implementarlo debemos de añadir la siguiente etiqueta meta en el <head>:
- <meta name="viewport" content="width=320">
A esta etiqueta podemos añadirle varios parámetros para que nuestra página se comporte como queramos:
Si queremos que nuestra página tenga el mismo ancho que el de la pantalla de nuestro dispositivo debemos establecer su width como "device-width" y automáticamente se ajustará.
- <meta name="viewport" content="width=device-width">
Cuando tenemos un diseño responsivo tenemos que especificar que el ancho de la página sea el mismo que el del dispositivo, y además debemos de establecer que el zoom mínimo sea 1.0, que seria la página sin hacer zoom, y opcionalmente podemos establecer si pueden ampliar la página o no los usuarios con el User-scalable configurándolo con "no".
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Xitrus está alojado en:
