HTML5: introducción al desarrollo móvil

I. Introducción

El desarrollo de terminales móviles comunes se divide en sitio web móvil y diseño receptivo.
El desarrollo móvil permite a los técnicos centrarse en la optimización de la página móvil sin preocuparse por la compatibilidad de la versión de escritorio, pero una vez que se cambia el contenido de la página, el costo de mantenimiento se duplica;
El diseño receptivo permite a los desarrolladores mantener un solo proyecto, ahorrando costos de desarrollo y mantenimiento, sin embargo, la desventaja es que deben ser compatibles con el terminal móvil y el escritorio, que también prueba el diseño de la página.
Los dos métodos de desarrollo son sólidos y el débil aún no es concluyente Este blog analiza principalmente las habilidades de desarrollo de terminales móviles.

Dos, habilidades de desarrollo de terminales móviles

1. Configuración de la ventana gráfica

Las ventanas de visualización de los sitios web de escritorio tradicionales a menudo se desarrollan con una resolución de 1024X768 o superior, que es mucho más grande que el tamaño de la ventana del terminal móvil. Para permitir que las páginas web de escritorio se muestren normalmente en dispositivos móviles, los navegadores móviles han introducido una ventana virtual llamada "viewport". El tamaño de esta ventana es diferente en diferentes dispositivos. (1024px para windows, 980px para ios)
Para permitir que el dispositivo móvil muestre la página por completo, el navegador a menudo escala la ventana gráfica para adaptar su ancho, de modo que la página web de 980 px se pueda mostrar en el dispositivo móvil de 320 px. Es por eso que algunas de nuestras páginas web se ven muy pequeñas en teléfonos móviles. (En este momento, cuando se usa JavaScript para obtener el ancho de la página, todavía es de 980 px)
En la página móvil, podemos agregar metaetiquetas a las etiquetas para configurar la ventana gráfica.
```
<meta name="viewport" content="width=device-width,initial-scale=1.0"></meta>
```
El código anterior hace dos cosas clave:
1. Establezca el ancho de la ventana gráfica al ancho del dispositivo;
2. Establecer escala = 1.0, es decir, la ventana no se escala de forma predeterminada;
Si no desea que los usuarios amplíen su página, puede hacer lo siguiente:
```
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maxminscale=1.0"></meta>
```
Es decir, el zoom de la página está bloqueado en 1.0 y el usuario está organizado para realizar un comportamiento de zoom.

2. Disposición porcentual

La ventaja del diseño porcentual sobre el diseño de píxeles tradicional es que cuando el usuario hace zoom, el diseño de la página no se verá afectado por el cambio de ancho.
Cuando el usuario hace un zoom demasiado grande, la parte de la imagen o el texto puede bloquearse. Se pueden utilizar los siguientes métodos para resolver el problema:
1. Para las imágenes, configure el relleno para ellas;
2. Para texto, puede usar vw para reemplazar px. Vw representa el ancho del texto en la ventana gráfica y vh representa la altura. En el sistema vw, la anchura de la ventana gráfica se establece en 100 vw y el tamaño relativo del texto se convierte a su vez.

3. Diseño flexible: Flex

Las páginas web tradicionales están inundadas de muchos elementos flotantes, lo que ejerce mucha presión sobre el rendimiento de la representación del navegador. En este sentido, hay un modelo de caja flexible más flexible, diseño Flex.
Con respecto al conocimiento relevante del diseño flexible, vaya al sitio web de MDN para aprender, y no lo repetiré aquí:

4. Consulta de medios

Las resoluciones del terminal móvil son variadas, las imágenes de alta resolución están bajo presión para ser renderizadas en teléfonos de baja resolución y las imágenes de baja resolución son muy borrosas en teléfonos de alta resolución Ambas situaciones son muy malas.
En este sentido, CSS3 proporciona una regla de visualización llamada Media Query .
```
    <link rel="stylesheet" href="./css/index.css" media="screen and (max-width: 600px)">
```
En el código anterior, la etiqueta de enlace se usa para importar el archivo css externo y el atributo de medios se agrega al mismo tiempo. El contenido se explica a continuación:
1. pantalla representa el tipo de medio que es la pantalla de visualización de la computadora o terminal móvil (valores disponibles: todo, impresión, tv, etc.);
2. y representa la relación de "y";
3. (ancho máximo: 600px) indica las características del medio y debe colocarse entre paréntesis, lo que significa que el ancho máximo del medio es 660px;
4. Entonces, el significado de todo el medio es: cuando el ancho de la pantalla es menor o igual a 600px, el archivo css es aplicable.
Aquí hay un ejemplo:
1. screen and (min-width: 400px): Cuando el ancho de la pantalla es mayor o igual a 400px, aplique el archivo css;
2. screen and (min-width: 400px) and (max-width: 600px): Cuando el ancho de la pantalla es mayor a 400px y menor a 600px, aplique el archivo css;
3. all and (max-device-width: 480px): Cuando el ancho del dispositivo sea menor o igual a 480px, aplique el archivo css;
4. all and (max-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait): Cuando el ancho de todos los dispositivos multimedia esté entre 481px y 1024px, aplique este archivo css. Cuando se portraitcambia landscape, significa el medio que coincide con la pantalla horizontal.

Con media query, podemos crear archivos CSS correspondientes para dispositivos con diferentes resoluciones de pantalla:

    <!-- 针对所有设备的基础样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- <=480的手机可用 -->
    <link rel="stylesheet" href="./css/css480.css" media="all and (max-device-width: 480px)">
    <!-- 480<px<1024的手机可用 -->
    <link rel="stylesheet" href="./css/css481_1024.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px)">
    <!-- >=1024的手机可用 -->
    <link rel="stylesheet" href="./css/css1024+.css" media="all and (min device-width: 1024px)">

Por supuesto, también podemos especificar las restricciones correspondientes en el archivo css:
```
@media all and (max-device-width: 480px){
      
      
    h1 {
      
      
        font-size : 24px;
    }
}
```
Cabe señalar que el código css correspondiente a la regla debe colocarse entre corchetes de media.

5. diagrama de rencor

En el lado del escritorio, la descarga paralela de archivos ha atraído la atención durante mucho tiempo, y ha atraído más atención en el lado móvil. En los dispositivos móviles, la cantidad de archivos descargados en paralelo es muy limitada, generalmente 4 ~ 5. Demasiados archivos afectarán la velocidad de carga de la página.
Para resolver el problema de descargar la cantidad de imágenes, Sprite es una buena opción.

Aquí hay un ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
    <style>
        *{
       
       
            padding: 0;
            margin: 0;
        }
        ul{
       
       
            list-style: none;
        }
        li{
       
       
            width: 250px;
            float: left;
            position: relative;
            font-size: 32px;
            color: #565656;
            border-bottom: 1px solid #ccc;
            line-height: 170px;
            text-indent: 180px;
        }
        li::before{
       
       
            content: "";
            width: 170px;
            height: 170px;
            background: url(./image/color.jpg) no-repeat;
            position: absolute;
            left: 10px;
        }
        li:nth-child(1)::before{
       
       
            background-position: 0 0px;
        }
        li:nth-child(2)::before{
       
       
            background-position: 0 -170px;
        }
        li:nth-child(3)::before{
       
       
            background-position: 0 -350px;
        }
        li:nth-child(4)::before{
       
       
            background-position: -170px 0px;
        }
        li:nth-child(5)::before{
       
       
            background-position: -170px -180px;
        }
        li:nth-child(6)::before{
       
       
            background-position: -170px -350px;
        }
        li:nth-child(7)::before{
       
       
            background-position: -340px 0;
        }
        li:nth-child(8)::before{
       
       
            background-position: -340px -190px;
        }
        li:nth-child(9)::before{
       
       
            background-position: -340px -340px;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>    
</body>
</html>

Mostrar resultados:

Inserte la descripción de la imagen aquí

Con el mapa de despecho, puede reducir la descarga de imágenes paralelas y acelerar la velocidad de renderizado.

6. Fuente de iconos

Las fuentes de iconos son un medio importante para reemplazar imágenes para mostrar iconos especiales y fuentes especiales. Se popularizan muy rápidamente. Algunos sitios web famosos como Alibaba Vector Icon Library, fontawesome, etc. tienen muchas fuentes de iconos exquisitas;

A continuación, utilizamos un conjunto de iconos para demostrar el uso de fuentes de iconos:

Tome FlatUI como ejemplo, primero descargue el archivo de fuente relevante del sitio web oficial e importe la página:

 @font-face{
        
        
     font-family: 'flat-ui-pro-icons-regular';
            /*三选一*/
     src: url('./font/glyphicons/flat-ui-pro-icons-regular.ttf'),    /*常见的矢量字体封装格式*/
         url("./font/glyphicons/flat-ui-pro-icons-regular.eot"),     /*SFNT子集化后压缩*/
         url('./font/glyphicons/flat-ui-pro-icons-regular.woff');    /*SFNT压缩后的文件*/
}

Cree una nueva etiqueta h1 e introduzca fuentes en su pseudoclase anterior. Nota: contentEl contenido es codificación Unicode :

h1::before{
        
        
    font-family: 'flat-ui-pro-icons-regular';
    content: '\e608';
    margin-left: 20px;
}

El efecto de representación final en la página:
Vale la pena mencionar que el color de la fuente del ícono se puede cambiar con el color de la etiqueta; si desea usar un ícono de color, no se puede lograr la fuente del ícono monocromático, debe usar svg o imágenes para lograrlo.

7. Interacción móvil

En los dispositivos móviles, las interacciones de las personas han cambiado del mouse y el teclado al tacto. Por lo tanto, los eventos de interacción que se repiten deben ser reemplazados por eventos adecuados para terminales móviles;
El evento de clic tradicional tendrá un retraso de aproximadamente 1 segundo en los dispositivos móviles, porque el navegador móvil necesita determinar si el usuario presiona o hace clic de forma prolongada;

Para que la experiencia móvil sea más fluida, puede cambiar el evento de clic a evento táctil:

let btn = document.getElementById('btn');
btn.addEventListener('touchstart',function(ev){
      
      
    console.log(ev.touches.length)
})
document.body.addEventListener('touchmove',function(ev){
      
      
    console.log(ev.target)
})

Hay tres eventos en contacto: touchstart, touchmove y touchend ;

** touchstart: ** disparado cuando el toque comienza

** touchmove: ** Se activa cuando el dedo se desliza en la pantalla

** toque: ** Se activa cuando termina el toque
Y cada evento táctil incluye tres listas táctiles, y cada lista contiene una serie de puntos táctiles correspondientes (utilizados para implementar multitáctiles):

toques : una lista de todos los dedos actualmente en la pantalla;

targetTouches : una lista de dedos ubicados en el elemento DOM actual;

changeTouches : una lista de dedos involucrados en el evento actual.
Cada punto táctil contiene la siguiente información táctil (de uso común):

dentificador : un valor numérico que identifica de forma exclusiva el dedo actual en una sesión táctil. Por lo general, el número de serie comienza desde 0 (android4.1, uc)

target : elemento DOM, que es el objetivo de la acción.

pageX/ pageY/ clientX/ clientY/screenX/screenY: Un valor, la posición donde ocurre la acción en la pantalla (la página incluye la distancia de desplazamiento, el cliente no incluye la distancia de desplazamiento, la pantalla se basa en la pantalla).

Además de los eventos táctiles, ios también proporciona eventos de gestos, es decir, operaciones con varios dedos. Cuando más de dos dedos tocan la pantalla, se activa este evento:

document.body.addEventListener('gesturechange',function(ev){
      
      
    console.log("手指旋转角度为：" + ev.rotation);
    console.log("手指旋缩放为：" + ev.scale);
})

El evento del gesto es el siguiente:

Inicio por gestos : se activa cuando se presiona un dedo en la pantalla y otro dedo toca la pantalla. Similar a la función de
inicio táctil ; cambio de gesto : se activa cuando cambia la posición de cualquier dedo que toca la pantalla.

Gestureend : se activa cuando se quita un dedo de la pantalla.

8. Algunos pequeños detalles

Obtenga la información del cliente del usuario:
```
console.log(navigator.userAgent);
```
Después de obtener la información del cliente, las expresiones regulares se pueden usar para emitir juicios e impulsar estilos CSS o saltos de página con diferentes reglas. Consulte este artículo para obtener más detalles:

Obtenga el entorno de red del usuario:

console.log(navigator.connection.type);

Obtenga el estado de la pantalla del usuario:

console.log(window.orientation || screen.orientation);

Configurar para abrir la página de inicio (IOS):

<link rel="apple-touch-startup-image" href="start.png">

Configure el enlace de iTunes:

<meta name="apple-itunes-app" content="app-id=123456">

Tres, marco de desarrollo de terminales móviles

Zepto-jQuery para dispositivos móviles. El uso de Zepto es casi el mismo que el de jQuery y proporciona muchas interfaces para el desarrollo móvil.
BootStrap, Foundation, Semantic, Amaze-front-end framework de desarrollo, proporciona una serie de componentes y estilos, que son convenientes para que los utilicen los desarrolladores;
UI plana, BootMetro, Pure, kit de herramientas de diseño de colores. Flat UI proporciona una serie de elementos básicos de las fuentes de iconos de página, gráficos vectoriales, etc., enfocándose en la estética del diseño, lo cual es muy bueno para desarrolladores con un sentido de diseño insuficiente.
Herramienta de visualización D3. Si desea mostrar una gran cantidad de gráficos y datos en una página web, la herramienta de visualización puede completar todo tipo de gráficos altos con códigos simples.
Controla los gestos táctiles fácilmente con martillo. Hammer.js proporciona tocar, tocar dos veces, pellizcar (deslizar con dos dedos), rotación, deslizar, desplazar (arrastre lento) y otros eventos de gestos que simplifican los gestos complejos. Todos tienen buena compatibilidad y pueden reconocer la mayoría de los dispositivos móviles del mercado.