-
Un tutorial de HTML de la ventana gráfica
-
En HTML, un "ventana" se refiere a una ventana virtual o contenedor en el que se muestra el contenido. Ventanas gráficas son los más utilizados en los diseños de Web destinado a dispositivos móviles o esencialmente cualquier dispositivo "especial" que no es una pantalla de monitor estándar, como un iPad. Puede asegurarse de que su página web se muestra de forma óptima en estos dispositivos mediante el uso de la "ventana gráfica" etiqueta meta de controlar la escala y dimensión.Instrucciones
1 Abrir archivo de índice o el encabezado de su página web - donde se presenta la parte "<head>" del código. Si la creación de un nuevo sitio desde cero, crear un nuevo documento en un editor de texto o HTML llamado "index.html" y añadir la siguiente declaración "doctype" al principio del documento:
<! DOCTYPE html>
Introduzca la etiqueta de apertura "cabeza" justo debajo de la etiqueta de "tipo de documento":
<! DOCTYPE html>
<Head>
2 Añadir una etiqueta meta debajo de la etiqueta de la cabeza abertura en su documento, a continuación, cerrar el encabezado:
<Meta>
</ Head>
Para afectar la vista, tendrá que dar su etiqueta meta de un nombre de "ventana"
<Meta name = "ventana">
Por sí misma, esta etiqueta no hará nada. Es necesario determinar la mejor manera de tamaño y la escala de la ventana gráfica para mostrar su diseño final y añadir los atributos correspondientes.
3 Añadir el atributo "contenido" a su etiqueta meta. Este atributo tomará un valor de anchura, la altura y la escala para determinar el tamaño de la ventana gráfica es y si puede ser escalado por el usuario o el dispositivo. Por ejemplo, si ha creado un diseño móvil que está a sólo 320 píxeles de ancho para su visualización en un iPhone, que idealmente quiere que se llene toda la pantalla sin tener en cuenta si el usuario está en orientación vertical u horizontal. Además, desea que el contenido de la escala cuando se ve en un iPad, que tiene un área visible por defecto de 980 píxeles de ancho. Para dar cabida a ambos dispositivos, establecer el ancho de la ventana gráfica de "320" y darle una escala inicial de "1" El visor ahora será de al menos 320 píxeles de ancho, pero la escala adecuada si la ve en un dispositivo con una pantalla más grande.
<Meta name = "viewport" content = "width = 320, inicial escala = 1">
4 Cambiar el valor de anchura a "dispositivo de anchura" a escala el contenido a la anchura del dispositivo de forma dinámica.
<Meta name = "viewport" content = "width = dispositivo de ancho; inicial escala = 1,0; máximo escala = 1,0;">
Esto difiere del primer método en el que el valor de "dispositivo de anchura" permite que el contenido para llenar la pantalla del dispositivo por el zoom, sin importar lo grande o pequeña que la pantalla es. Configuración de una anchura y una escala específica, como en el primer ejemplo, se expandirá la vista en sí si el ancho de la pantalla del dispositivo es mayor que el ancho conjunto de su "ventana" etiqueta meta, en lugar de ampliar el contenido.
5 Proceda a añadir el código HTML o personalizaciones que queda a su archivo, a continuación, guardar y probarlo. Si no se puede poner a prueba en varios dispositivos, puede utilizar un simulador de línea, tales como el simulador de prueba iPhone o iPad Peek.
