Cómo desarrollar páginas móviles
Cabe decir que el desarrollo de los terminales móviles surgió con el auge del HTML5. El primer iPhone nació en 2007, y el término HTML5 apareció en “escenario” por primera vez en 2009. En ese momento, la Internet móvil comenzó a aumentar gradualmente. Hoy en día, la Internet móvil ha estado estrechamente relacionada con la vida diaria de las personas. Como desarrollador, ¿cuál es la mejor manera de desarrollar algo nuevo que ha estado probando "en el camino"? Este artículo presenta los métodos de desarrollo que he explorado desde el nacimiento del terminal móvil hasta el presente, junto con los puntos de conocimiento correspondientes. Bienvenido a comunicarme y compartir con todos.
La primera vez que entré en contacto con terminales móviles, el uso de unidades absolutas
Entré en contacto con el desarrollo de terminales móviles en 2012. En ese momento, lo relativamente nuevo fue crear APP WEB. ¿Qué es la APLICACIÓN WEB? La llamada APLICACIÓN WEB utiliza páginas web para simular los efectos interactivos de las APLICACIONES desarrolladas en idiomas nativos (como iOS). Aunque HTML5 tiene un rendimiento sobresaliente a nivel de rendimiento, hay que admitir que a nivel de rendimiento del sistema, la APLICACIÓN WEB es obviamente peor que las aplicaciones nativas (es decir, la APLICACIÓN nativa). Esto también bloquea temporalmente la carretera de la APLICACIÓN WEB.
Como resultado, la dirección de desarrollo de los terminales móviles se inclinó gradualmente hacia las páginas web móviles. Para el lado de la PC, siempre hemos usado px (píxeles) para escribir código, pero cuando se trata del lado móvil, debemos enfrentar diferentes resoluciones. En 2012, cuando los miembros de mi equipo y yo escribíamos la versión móvil, todavía usábamos px (píxeles) como unidad porque era nuestro primer contacto. Debido a que en 2012, el tamaño de pantalla de la mayoría de los teléfonos móviles tenía una resolución de 320 * 480, era completamente posible desarrollar páginas web móviles utilizando píxeles como unidades.
Para obtener conocimientos sobre la ventana gráfica, puede hacer clic para ver - Mobile H5 Knowledge - Viewport
Porcentaje horizontal, valor de píxel vertical
Con el desarrollo del terminal móvil Continuando En septiembre de 2012, se lanzó el iPhone 5 y comenzó a liderar el desarrollo de "resoluciones especiales". Como resultado, las pantallas de teléfonos móviles con resolución de 320 * 480 ocuparon una participación cada vez menor en todo el mercado de teléfonos móviles. están apareciendo como hongos.
Obviamente no es aconsejable que desarrollemos con píxeles fijos en este momento. Entonces, comenzamos a usar porcentaje (unidad de medida relativa) para crear los atributos horizontales (ancho, relleno izquierdo y derecho, márgenes izquierdo y derecho) del modelo de caja, y usamos em (unidad de medida relativa) para procesar texto. Sin embargo, el modelo de caja todavía utiliza píxeles fijos como unidad vertical.
Sin embargo, esta operación causó un problema, principalmente en el procesamiento de etiquetas img. ¿Compañía de desarrollo de software de Chengdu? Baidu Para las imágenes, solo necesita establecer el porcentaje horizontal y la escala vertical se escalará automáticamente. Está bien en las páginas de lista y en las páginas de contenido; después de todo, el contenido expande automáticamente la altura del elemento principal, pero en la página de inicio o en la página de segundo nivel, siempre que se trate de un modelo de cuadro con una altura fija del elemento principal, el img dentro. será un problema de deformación (comprimido o estiramiento).
Este problema me ha preocupado durante mucho tiempo, pero nunca he encontrado una buena solución.
Diseño responsivo
Mientras todavía estaba luchando con cómo lidiar con img, en 2013, una nueva tecnología se hizo popular en Beijing: el diseño responsivo. A través de consultas de medios, configure diferentes estilos para dispositivos de diferentes tamaños y resoluciones. Cabe decir que no es de gran ayuda para el desarrollo de páginas móviles. La razón es que la aparición de la capacidad de respuesta se debe principalmente a que esperamos que un fragmento de código pueda adaptarse a PC, tabletas y teléfonos móviles al mismo tiempo. Dado que los estilos y las experiencias de usuario de las tres plataformas deben ser completamente diferentes, en este momento necesitamos tener "puntos de interrupción", con diferentes estilos en diferentes ubicaciones, y los estilos entre los dos "puntos de interrupción", luego use unidades relativas para hacer "transiciones de gradiente".
Cabe decir que el diseño responsivo resuelve el problema típico de los diferentes estilos de píxeles de la pantalla, pero aún no puede resolver el problema anterior.
Para obtener conocimientos sobre las consultas de medios CSS3, puede hacer clic para ver - Mobile H5 Knowledge-CSS3 Media Query
Porcentajes promedio horizontal y vertical
En horizontal y vertical porcentajes Cuando el método del valor de píxel no es válido, lo único que se me ocurre es establecer la dirección vertical en un porcentaje, pero encuentro que hay problemas con algunas configuraciones verticales de los atributos del modelo de caja, como padding-top/bottom, margin- espera superior/inferior. En el atributo de texto, la altura de la línea no se calcula en función de la altura del elemento actual al establecer el porcentaje.
Como resultado, el método de establecer las direcciones horizontal y vertical en porcentajes no funciona~
Para algunos problemas con el modelo de caja y el uso razonable de fondos, puedes hacer clic para view - Mobile H5 Knowledge - Variety Box Model y Mobile H5 Knowledge - El uso mágico del fondo
Rem horizontal y vertical
Con el desarrollo de HTML5, además de la unidad em original , se han agregado unidades rem. Ambas unidades son unidades relativas. 1em representa el tamaño de fuente del elemento actual y 1rem también representa el tamaño de fuente, pero se calcula para la etiqueta html. En comparación, rem es mucho más sencillo de calcular. Entonces, intenté usar rem para resolver las configuraciones horizontales y verticales, descartando el porcentaje, y descubrí que todavía era bastante bueno y compatible con la mayoría de los modelos y navegadores. Más tarde, cuando utilicé un teléfono móvil Huawei para realizar pruebas, descubrí que el movimiento remoto horizontal no era compatible. Entonces, necesito encontrar una manera nuevamente ~~~
Respuesta correcta: porcentaje horizontal, rem vertical
Para teléfonos móviles Huawei, probé el porcentaje horizontal y descubrí que aún puede ser compatible, por lo que se hizo un compromiso, utilizando porcentajes para el control horizontal y rem como unidad para la dirección vertical. En este momento, se puede lograr la compatibilidad con todos los navegadores.
Solución correcta de optimización: porcentaje horizontal, rem vertical
Al usar el porcentaje horizontal y el rem vertical, habrá un cierto error debido al cálculo, así que use algunas de las tecnologías HTML5 que tiene. Aprendí, optimice la página móvil, por ejemplo, use la sombra del cuadro CSS3 para reemplazar el borde. Para rem, generalmente hay un cierto error de fuente en el cálculo (se calculará el punto decimal). En este momento, entré en contacto con la página móvil de Taobao y vi un buen marco JS: flexible.js. , I La página se procesa para evitar la aparición de puntos decimales.
Para el uso específico del marco flexible.js, puede hacer clic para ver - Conocimiento móvil H5 - Procesamiento de puntos decimales rem flexible.js
Optimice la solución correcta 2: use fijo implementación arbitraria de píxeles
A principios del mes pasado, descubrí que el método de producción del terminal móvil de NetEase era algo especial. Cuando verifiqué el código, descubrí que NetEase usaba píxeles fijos para escribir y controlaba la página a través de MetaHandler. .js. Lo probé recientemente y se siente bastante bien y la compatibilidad es relativamente buena, por lo que es un buen método.
Para un uso específico del marco MetaHandler.js, puede hacer clic para ver - Conocimiento móvil H5 - Método de implementación de píxeles fijos