En el estudio anterior del front-end, la comprensión de las metaetiquetas era solo esta oración.
<meta juego de caracteres=UTF-8>
Pero cuando abres cualquier sitio web, hay una columna de metaetiquetas en su etiqueta principal. Por ejemplo, tenemos el sitio web de artes marciales VeVb, pero no estoy familiarizado con él, así que agregué la metaetiqueta al principio del plan de estudio.
<meta nombre=contenido de ventana gráfica=ancho=ancho del dispositivo, escala-inicial=1.0, escala-máxima=1.0, escala-mínima=1.0, escalable por el usuario=no>
Este es el más utilizado. Las instrucciones de ancho y alto especifican el ancho y alto lógicos de la ventana gráfica respectivamente. Su valor es un número en píxeles o un símbolo de marcador especial. La directiva de ancho utiliza la etiqueta de ancho del dispositivo para indicar que el ancho de la ventana gráfica debe ser el ancho de la pantalla del dispositivo. De manera similar, la directiva de altura utiliza el indicador de altura del dispositivo para indicar que la altura de la ventana gráfica es la altura de la pantalla del dispositivo.
La directiva escalable por el usuario especifica si el usuario puede hacer zoom en la ventana gráfica, es decir, la vista de la página web. Un valor de sí permite al usuario hacer zoom, un valor de no no permite hacer zoom.
La directiva de escala inicial se utiliza para establecer la escala inicial de la página web. El valor de escala inicial predeterminado varía entre los navegadores de los teléfonos inteligentes. Normalmente, el dispositivo mostrará la página web completa en el navegador; al configurarlo en 1.0 se mostrará el documento web sin escala.
Las directivas de escala máxima y escala mínima se utilizan para establecer el límite del usuario en la relación de zoom de la página web. Los valores oscilan entre 0,25 y 10,0. Al igual que la escala inicial, el valor de estas directivas es la escala aplicada al contenido de la ventana gráfica.
Todos los navegadores de teléfonos inteligentes admiten las directivas de ancho y escala de usuario de la etiqueta <meta> de ViewPort. Pero Opera Mobile no utiliza la directiva escalable por el usuario, sino que argumenta que los usuarios siempre deben conservar la capacidad de ampliar las páginas web en los navegadores móviles.
Lo siguiente es muy poco utilizado. dispositivoPixelRatiowindow.devicePixelRatio es la relación entre píxeles físicos y píxeles independientes del dispositivo (caídas). La expresión de la fórmula es: window.devicePixelRatio = píxeles físicos/caídas
pantalla adaptable del sitio web que se adapta a la pantallaSi el valor del contenido es menor o igual al ancho de la pantalla, el ajuste de pantalla adaptable del sitio web se desactivará. El sitio web no escalará con la extensión del navegador.
Si el valor del contenido es mayor que el ancho de la pantalla, se habilitará el ajuste a la pantalla;
Relacionado con el navegador Apple2015-07-08
<meta nombre=contenido de ventana gráfica=minimal-ui>
En Safari en iOS 7.1, el atributo minimal-ui se agrega a la metaetiqueta, de modo que la barra de direcciones superior y la barra de navegación inferior se pueden ocultar cuando se carga la página web.
<meta nombre=contenido apto para aplicaciones web-móviles-apple=yes>
Si habilitar la función de la aplicación web está configurado en sí. El sitio web eliminará la barra de herramientas y la barra de menú predeterminadas de Apple en el modo de pantalla completa.
<meta nombre=apple-touch-contenido de pantalla completa=sí>
Habilitar soporte para programas de aplicaciones web
<meta nombre=detección de formato contenido=teléfono=no><meta nombre=detección de formato contenido=correo electrónico=no />
¡El iPhone agregará automáticamente un estilo de enlace a su texto y hará clic en el número para marcarlo automáticamente!
teléfono=no ignora los números en la página y los identifica como números de teléfono
teléfono=yes activa la conversión de números en enlaces de acceso telefónico. ¡Está activado de forma predeterminada!
<meta name=apple-mobile-web-app-status-bar-style content=predeterminado /><meta name=apple-mobile-web-app-status-bar-style content=negro /><meta name=apple- contenido-estilo-barra-de-estado-de-aplicación-web-móvil = negro-translúcido />
Controlar el estilo de visualización de la barra de estado predeterminado (blanco) negro (negro) negro translúcido (gris translúcido)
etiqueta de enlace icono-toque-de-manzanaSi Apple-mobile-web-app-capable está configurado en sí, puede usar el botón Agregar a la pantalla de inicio para agregar el sitio web a la pantalla de inicio en iPhone, iPad y iTouch Safari.
Al configurar la etiqueta correspondiente del ícono táctil de Apple, el ícono agregado a la pantalla de inicio usará la imagen que especificamos.
Lo siguiente es seleccionar un ícono óptimo para diferentes dispositivos Ox. El tamaño predeterminado para iPhone es 60 px, iPad es 76 px y la pantalla retina se multiplica por 2.
<link rel=apple-touch-icon href=touch-icon-iphone.png><link rel=apple-touch-icon tamaños=76×76″ href=touch-icon-ipad.png><link rel=apple- tamaños de íconos táctiles=120×120″ href=touch-icon-iphone-retina.png><link rel=apple-touch-icon tamaños=152×152″ href=touch-icon-ipad-retina.png>
Antes de ios7, el sistema agregaba efectos especiales (esquinas redondeadas y resaltados) a los íconos de forma predeterminada. Si no desea que el sistema agregue efectos especiales, puede usar apple-touch-icon-precomposed.png en lugar de apple-touch-. icono.png.
La prioridad del uso de iconos es la siguiente:Si no hay ningún ícono que coincida con el tamaño recomendado para el dispositivo correspondiente, se usará primero el ícono que sea más grande que el tamaño recomendado pero más cercano al tamaño recomendado.
Si no hay íconos más grandes que el tamaño recomendado, se elegirá primero el ícono más cercano al tamaño recomendado.
Si hay varios íconos que cumplen con el tamaño recomendado, se seleccionará primero el ícono que contiene la palabra clave precompuesta.
Si no especifica un ícono usando la etiqueta de enlace en el área, buscará automáticamente íconos png con el prefijo apple-touch-icon en el directorio raíz del sitio web.
Nota: ios7 ya no agrega efectos especiales a los íconos. Antes de ios7, se agregaban efectos especiales a los íconos de forma predeterminada a menos que el ícono tuviera la palabra clave -precomposed.png como sufijo. Explorador de Internet <meta http-equiv=X-UA-Compatible content=IE=edge> Evita que IE use el modo de compatibilidad
<meta name=MobileOptimized content=320″> La etiqueta de ancho de definición establecida por Microsoft para la versión IE Mobile
El navegador no ajustará automáticamente el tamaño del archivo, lo que significa que es un tamaño fijo y no se ampliará ni escalará con el navegador.
<meta name=HandheldFriendly content=true /> : si es compatible con dispositivos portátiles, solo verdadero o falso
<meta name=screen-orientation content=portrait> Forzar pantalla vertical
<meta name=full-screen content=yes> Forzar pantalla completa
<meta name=browsermode content=application> Modo de aplicación
<meta name=x5-orientation content=portrait> Forzar pantalla vertical
<meta name=x5-fullscreen content=true> Forzar pantalla completa
<meta name=x5-page-mode content=app> Modo de aplicación
<meta name=renderer content=webkit> Habilitar modo rápido
El meta se refiere al elemento que proporciona metainformación sobre la página, como descripciones y palabras clave para motores de búsqueda y frecuencia de actualización. La etiqueta se encuentra al principio del documento y no contiene ningún contenido. Las propiedades de una etiqueta definen los pares de nombre/valor asociados con el documento.
¿Cuáles son las características exclusivas de la versión móvil?<meta contenido=ancho=ancho del dispositivo, escala inicial=1.0, escala máxima=1.0, escalable por el usuario=0 nombre=viewport> <meta contenido=sí nombre=apple-mobile-web-app-capable> <meta contenido=nombre negro=estilo-barra-de-estado-de-aplicación-web-móvil-apple> <meta contenido=teléfono=sin nombre=detección-de-formato>
La primera metaetiqueta significa: forzar que el ancho del documento al ancho del dispositivo permanezca 1:1, y la relación de ancho máxima del documento es 1.0, y los usuarios no pueden hacer clic en la pantalla para ampliar la vista;
La segunda metaetiqueta es la metaetiqueta privada de Safari en el dispositivo iPhone, lo que significa: permitir la navegación en modo de pantalla completa;
La tercera metaetiqueta también es una etiqueta privada de iPhone, que especifica el estilo de la barra de estado en la parte superior de Safari en iPhone;
El color de la barra de estado (barra superior de la pantalla) en las aplicaciones de aplicaciones web;
El valor predeterminado es predeterminado (blanco), que se puede configurar en negro (negro) y negro translúcido (gris translúcido).
Nota: Si el valor es negro translúcido, ocupará la posición de px de la página y flotará sobre la página (cubrirá los 20 px de altura de la página; la pantalla Retina de iphone4 e itouch4 es de 40 px).La cuarta metaetiqueta significa: Dígale al dispositivo que ignore los números de la página como números de teléfono.
Echemos un vistazo al meta de las páginas móviles de los principales fabricantes: 1. pequeño<meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta nombre=apple-mobile-web-app-status-bar-style contenido=negro-translúcido/><meta nombre=ventana gráfica contenido=ancho=ancho del dispositivo,escala-inicial=1,escala-máxima=1,escalable-usuario=no/><meta nombre=detección de formato contenido=teléfono=no, dirección=no>2.Taobao
<meta content=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=teléfono=no,email= no name=format-detection/> <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/><meta name=viewport contenido = escala inicial = 0,5, escala máxima = 0,5, escala mínima = 0,5, escalable por el usuario = no>3. Jing Dong
<título>Versión Jingdong-Mobile</título><meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0, escala máxima=1.0, escalable por el usuario=0;><meta http-equiv=Contenido -Escriba contenido=texto/html; juego de caracteres=GBK><meta nombre=apple-mobile-web-app-capable content=yes><meta nombre=apple-mobile-web-app-status-bar-style contenido=negro><meta nombre=detección de formato contenido=teléfono=no><meta http-equiv=Expira contenido=-1><meta http-equiv= Cache-Control content=no-cache><meta http-equiv=Pragma content=no-cache><meta name=Palabras clave contenido=><meta name=descripción contenido=>4. NetEase
<título>NetEase Mobile</título><meta nombre=viewport contenido=ancho=ancho del dispositivo,escala-inicial=1, escala-máxima=1, escala-mínima=1, escalable por el usuario=no><meta contenido = teléfono=sin nombre=detección de formato /><meta nombre=palabras clave contenido= /><meta nombre=descripción contenido= />5. Baidu
<meta nombre=contenido de referencia=always><meta charset=utf-8><meta nombre=viewport content=ancho=ancho del dispositivo,escala mínima=1.0,escala máxima=1.0,escalable por usuario=no><meta nombre=detección de formato contenido=teléfono=no>6. Sohu
<title>Mobile Sohu.com</title> <meta http-equiv=Content-Type content=text/html charset=utf-8 /><meta http-equiv=Cache-Control content=no-cache />< meta nombre = contenido de la ventana gráfica = ancho = ancho del dispositivo, escalable por el usuario = no, escala inicial = 1,0, escala máxima = 1,0, escala mínima = 1,0 /><meta nombre=Contenido optimizado para dispositivos móviles=320/><meta nombre=descripción contenido= /><meta nombre=palabras clave contenido= />
----
Simular página web móvil<meta nombre=contenido de ventana gráfica=ancho=ancho del dispositivo,escalable-usuario=no, escala-inicial=1.0, escala-máxima=1.0, escala-mínima=1.0″>
ventana gráfica -> ventana (área de visualización)
ancho = ancho del dispositivo ancho del dispositivo
ventana gráfica<metaname = 'viewport' contenido = ancho=320><metaname = 'viewport 'contenido = ancho=ancho-dispositivo>
user-scalable=no/0 si se permite el escalado
escala-inicial=1.0 valor inicial
escala máxima = 1,0
escala mínima=1.0
-----------------------
<meta nombre=contenido de la ventana gráfica=ancho=ancho del dispositivo, escalable por el usuario=no>
user-scalable=no/0 impide que los usuarios escale la página
<meta nombre=contenido de ventana gráfica=ancho=ancho del dispositivo, escalable por el usuario=no, escala inicial=1.0″>
escala inicial = 1.0 inicializar la relación de zoom de la página
<meta nombre=contenido de ventana gráfica=ancho=ancho del dispositivo, escala-inicial=1.0, escala-máxima=1.0, escalable por el usuario=0″>
escala máxima = 1,0 relación de escala máxima (para teléfonos móviles individuales Huawei Meta8)
-----------------------
Meta específica del dispositivo Apple:<!—Permitir que las páginas web se ejecuten como aplicaciones (permitir agregarlas a la pantalla de inicio)—><meta name=apple-mobile-web-app-capable content=yes><!—Color de la barra de estado—><meta name=apple- móvil -web-app-status-bar-style content=negro>meta de jingdong:
<meta nombre=contenido de ventana gráfica=ancho=ancho del dispositivo, escala inicial=1.0, escala máxima=1.0, escalable por el usuario=0″><meta nombre=contenido compatible con aplicaciones web-móviles-apple=yes>< meta name=apple-mobile-web-app-status-bar-style content=black><!—Números de teléfono y direcciones de correo electrónico prohibidos—><meta name=format-detection contenido=teléfono=no,correo electrónico=no>Meta de Taobao:
<meta content=yes name=apple-mobile-web-app-capable><!–Haga clic en el área de la página para mostrarla en pantalla completa—><meta content=yes name=apple-touch-fullscreen/><meta content=teléfono =no,correo electrónico =sin nombre=detección de formato/><!–Información de la aplicación, conservar el historial del sistema, efectos de movimiento–><meta nombre=Contenido de configuración de aplicación=pantalla completa=yes,useHistoryState=yes,transition=yes/>Otros meta:
<!–Forzar al navegador 360 a usar el kernel de Chrome para renderizar la página–><meta name=renderer content=webkit><!–Intentar usar el último modo de IE para renderizar–><meta http-equiv=X-UA -Contenido compatible=IE= edge><!–Optimizado para dispositivos portátiles, principalmente para algunos navegadores antiguos que no reconocen ventanas gráficas, como BlackBerry–><meta name=HandheldFriendly content=true><!–El antiguo navegador de Microsoft–><meta name=MobileOptimized content=320″><!– uc fuerza la pantalla vertical–><meta name=screen-orientation content=portrait><!– QQ fuerza la pantalla de pantalla vertical –><meta nombre=contenido de orientación x5=retrato><!– UC fuerza la pantalla completa–><meta nombre=contenido de pantalla completa=yes><!– QQ fuerza la pantalla completa–><meta name=x5-fullscreen content=true><!– Modo de aplicación UC–><meta name=browsermode content=application><!– Modo de aplicación QQ–><meta name=x5-page- modo contenido=aplicación>Resumir
Lo anterior es el contenido completo de este artículo. Espero que el contenido de este artículo tenga cierto valor de referencia para el estudio o trabajo de todos. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse. Red.