Cómo crear aplicaciones web móviles usando html5
Se puede decir que la velocidad de desarrollo de la web móvil actual es rápida. Como un profano en el campo móvil, después de este período de contacto, descubrí que tengo. Hizo un resumen sobre el desarrollo front-end.
1. Cuatro núcleos principales del navegador
1. Trident (navegador IE): debido a que IE tenía una gran participación de mercado en los primeros días, muchas páginas web en el pasado se basaban en Trident. Está escrito de acuerdo con los estándares, pero de hecho, este kernel no es muy compatible con los estándares web reales y hay muchos errores de seguridad.
2. Gecko: (FireFox) Su ventaja es que es potente y rico en funciones, y puede admitir muchos efectos especiales web complejos e interfaces de extensión del navegador. Su desventaja es que consume muchos recursos. como la memoria.
3. Webkit: (Chrome/Safari/UC) La ventaja es que Webkit tiene una estructura de código fuente clara y la velocidad de renderizado es muy rápida. La desventaja es que la compatibilidad del código de la página web es baja. lo que provocará una escritura no estándar. La página web no se puede mostrar correctamente.
4.Presto: (OpenOffice) El kernel de Presto es conocido como el kernel más rápido para navegar por la web y el kernel más compatible para procesar scripts JS. Puede ejecutarse perfectamente en los sistemas operativos Windows, Mac y Linux. correr.
El desarrollo móvil está dirigido principalmente a dispositivos portátiles, siendo la gran mayoría sistemas IOS y Android basados en el kernel Webkit, que se puede depurar mediante el navegador Chrome.
2. Navegadores móviles
Los navegadores han pasado gradualmente de los ordenadores de sobremesa tradicionales a los teléfonos móviles y la competencia es cada vez más feroz. En la actualidad, los principales navegadores móviles del mercado nacional: UC, Baidu, Open, QQ, Dolphin, Safari y Chrome no tienen ningún problema de compatibilidad. admite muy bien HTML5 y CSS3. Por lo tanto, aplique con valentía las tecnologías HTML5 y CSS3.
Al comienzo de la escritura de aplicaciones web, los ingenieros de front-end usarán HTML5 y abandonarán HTML4, porque HTML5 puede lograr algunas experiencias ricas de aplicaciones web que HTML4 no puede lograr y puede reducir una gran carga de trabajo para los desarrolladores. Por supuesto, cuando decide utilizar HTML5, debe estar muy familiarizado con él. Para comprender las nuevas características de HTML5, necesita saber qué hacen las nuevas etiquetas de HTML5. Por ejemplo, puede usar la etiqueta de sección para definir una parte del contenido o el área del artículo, puede usar directamente la etiqueta de navegación para definir una barra o etiqueta de navegación, etc.
3. Resolución del terminal
La resolución del teléfono móvil es mucho más complicada que la resolución de la PC. ¿Varias resoluciones? ¿Hay tanta diferencia de tamaño? Hasta cierto punto, esto trae muchos problemas a la producción de páginas. Por lo tanto, estos factores deben considerarse plenamente. Teniendo en cuenta la adaptabilidad del navegador, es necesario diseñar y producir una variedad de métodos diferentes.
1) Resoluciones de productos de los principales fabricantes de teléfonos móviles del mercado. Después de la investigación, se descubrió que las resoluciones actuales de los teléfonos móviles convencionales son 480 * 800 píxeles, 320 * 480 píxeles y 1280 * 720 píxeles (720P), que será la próxima tendencia. Estas son estadísticas muy aproximadas y requiere mucho esfuerzo tener datos precisos, que es lo que hace un analista de datos.
2) La resolución de los dispositivos que posee el grupo objetivo del proyecto. El grupo objetivo del proyecto son los usuarios. La resolución del teléfono móvil del usuario es hasta cierto punto más importante que el primer punto y determina la dirección del desarrollo del proyecto.
4. Desarrollo web responsivo
Al escribir CSS, no recomiendo que los ingenieros de front-end establezcan el ancho de un contenedor (ya sea exterior o interior) en un ancho fijo.
Para adaptarse a varios dispositivos portátiles, recomiendo que los ingenieros de front-end utilicen el modo de diseño adaptativo (Paypal usa el modo de diseño adaptativo), porque esto puede hacer que su página aparezca en ipad, itouch, ipod, iphone, android, web safarik, chrome. El navegador se muestra normalmente y ya no necesita considerar la resolución de su dispositivo.
El desarrollo web responsivo no es un cambio tecnológico innovador. En pocas palabras, el diseño web responsivo utiliza tres tecnologías: consultas de medios, diseño fluido e imágenes líquidas, y las combina para crear una página, de modo que la página pueda ser. se muestra perfectamente no sólo en el escritorio tradicional, sino también en varios dispositivos con diferentes resoluciones, como tabletas y teléfonos móviles. Para hacer esto, creo que no es difícil, continúa leyendo:
1) Preparación:
a) Instalación del complemento: ajuste del tamaño de la ventana. Puede descargar e instalar el complemento del navegador Google Chrome. Después de una instalación exitosa, cuando cambie el tamaño de la ventana del navegador, aparecerá un mensaje en escala de grises de la ventana actual y un mensaje de tamaño similar a la vista del teléfono móvil en la esquina inferior derecha. el navegador.
b) Instalar el editor: Hbulder o Webstorm.
c) Entender la diferencia entre vista y pantalla. La vista es el área de visualización de contenido del navegador, mientras que la pantalla es el área de visualización física del dispositivo. Por ejemplo, el ancho de la vista generalmente se expresa como ancho, mientras que el ancho de la pantalla se expresa como ancho del dispositivo. Creo que los zapatos para niños en las páginas móviles suelen ver códigos como este:
Donde ancho=ancho del dispositivo significa que el ancho de la página se establece igual que el ancho de la pantalla.
d) Colección de sitios web con concepto de diseño responsivo. Hay muchos sitios web de diseño web responsivos aquí para su referencia y aprendizaje.
2) Journey ING:
e) Consultas de medios para diseño web responsivo:
Para reducir las solicitudes http, creo que es mejor en estilo css hojas Configure consultas de medios en lugar de usar enlaces en el encabezado de la página para cargar consultas de medios. El formato de la consulta de medios en la hoja de estilo es:
@media screen y (max-width:960px){}
Escriba el estilo entre llaves. Esta declaración es equivalente a una declaración de juicio, con dos condiciones: una es que el ancho de la ventana gráfica no exceda los 960 px y la pantalla representa la pantalla de visualización. Cuando se cumplen estas dos condiciones, se llama al estilo entre llaves.
f) Diseño fluido para diseño web responsivo:
El diseño fluido se basa en el diseño porcentual. Lo más importante es centrarse siempre en el padre del elemento, todos los elementos se basan en el padre. La aplicación de un diseño fluido puede cooperar perfectamente con las consultas de medios para formar un efecto de salto suave de los cambios de diseño. En términos generales, los estilos en los medios incluyen principalmente ancho, relleno, margen, tamaño de fuente y alto de línea.
g) Imágenes líquidas en diseño web responsivo:
Para implementar imágenes líquidas, simplemente agregue el siguiente código: img{max-width:100%;}
Escribir títulos web para dispositivos móviles
1. Primero, echemos un vistazo a algunas metaetiquetas privadas en el kernel de webkit, que desempeñan un papel muy importante en el desarrollo de aplicaciones web. Desempeña un papel muy importante en el desarrollo de aplicaciones web
>p>
El significado de esta metaetiqueta es forzar que el ancho del documento sea 1:1 con el ancho del dispositivo, y la relación máxima de ancho del documento es 1.
0 y no permite a los usuarios hacer clic en la pantalla para hacer zoom;
La metaetiqueta Es una metaetiqueta especial para Safari en dispositivos iPhone. Su significado es: permitir la navegación en modo de pantalla completa;
Esta metaetiqueta es una metaetiqueta dedicada para safari en dispositivos iPhone: permite la navegación en modo de pantalla completa;
Esta metaetiqueta también es una metaetiqueta privada de iPhone, que especifica el estilo de la barra de estado en la parte superior de Safari en iPhone;
Esta metaetiqueta le dice al dispositivo que ignore los números en la página como teléfono números