La meta del puerto de vista es una etiqueta corta que se incluye en el encabezado del documento HTML que le dice al navegador cómo se debe representar la página. El metaelemento del puerto de visualización es lo que convierte una página de sitio web normal en una página receptiva.
Opciones de la etiqueta meta del puerto de visualización: hay muchas opciones que se pueden incluir en la sección de contenido del puerto de visualización meta:
- ancho: se utiliza para establecer el ancho de la vista del diseño. En nuestro caso, configuramos esto en el «ancho del dispositivo» que anula la configuración predeterminada de Apple de 960px.
- escala inicial: se utiliza para establecer el zoom inicial de la página y el ancho de la vista del diseño. Establecemos esto en 1, que es la vista predeterminada, pero puede aumentar fácilmente este número (no recomendado).
- escala mínima: se utiliza para establecer el nivel de zoom mínimo, es decir, cuánto puede alejar el usuario.
- escala máxima: se utiliza para establecer el nivel máximo de zoom, es decir, cuánto puede acercar el usuario.
- escalable por el usuario: se utiliza para establecer si el usuario puede hacer zoom en el contenido. Establecerlo en «no» evitaría el zoom.
De forma predeterminada, la etiqueta de puerto de visualización se utiliza de la siguiente manera:
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content= "width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> </head> <body> <h2>Welcome To GFG</h2> <p> Default code has been loaded into the Editor. </p> </body> </html>
Problema con esta metaetiqueta en algunos dispositivos: el uso predeterminado de la metaetiqueta genera algunos problemas en dispositivos iPhone y algunos teléfonos Android. Esto ocurre cuando la orientación de la pantalla cambia (de retrato a paisaje).
Esto ocurre porque el tamaño del contenido sigue siendo el mismo que en el modo vertical, incluso si el dispositivo se ha girado al modo horizontal. Esto suele suceder debido al atributo de «ancho» que se establece en «ancho de dispositivo» en la etiqueta meta. Como el ancho de la ventana gráfica y el dispositivo son diferentes, cuando la pantalla se gira al modo horizontal, en teoría, el ancho de la ventana gráfica debería cambiar a la altura del dispositivo, pero esto no se puede implementar de manera eficiente.
La solución a esto se puede implementar de la siguiente manera:
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content= "initial-scale=1.0; maximum-scale=1.0" /> </head> <body> <h2>Welcome To GFG</h2> <p> Default code has been loaded into the Editor. </p> </body> </html>
Ventaja de usar este método:
- Esto parece bloquear el dispositivo en la escala 1.0 independientemente de su orientación.
Desventaja de usar este método:
- Deshabilita por completo la escala del usuario (zoom de pellizco, etc.).
Salida en un dispositivo iPhone:
Modo retrato:
-
Modo paisaje:
Publicación traducida automáticamente
Artículo escrito por kevadiyasmeet y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA