¿Qué se debe utilizar para desarrollar páginas frontales de servicio al cliente y a qué se debe prestar atención?
9. Cómo eliminar la barra de control para ingresar URL en iOS y Android
Su jefe, PD o diseñador de interacción puede preguntarle: ¿Podemos hacer que nuestra aplicación web se parezca más a una aplicación nativa, donde no quiero que el usuario vea una barra de control para ingresar una URL?
La respuesta es sí. Podemos lograr esto con una simple línea de código javascript
setTimeout(scrollTo,0,0,0);
Tenga en cuenta que este código debe colocarse en window.onload para funcionar correctamente, y la altura del contenido del documento actual debe ser mayor que la altura de la ventana para que este código funcione.
Tenga en cuenta que este código debe colocarse dentro de window.onload para que funcione correctamente, y que la altura de su documento actual debe ser mayor que la altura de su ventana para que este código funcione correctamente.
10. Cómo prohibir a los usuarios rotar sus dispositivos
Una vez quise prohibir a los usuarios rotar sus dispositivos y también quise hacer lo que hacen algunos clientes: solo en modo vertical. o modo horizontal. Pero ahora te lo puedo decir con responsabilidad: ¡Ni se te ocurra! ¡Esto no es posible en la versión móvil de Webkit!
Al menos la API Webapp de Apple lo ha dicho todo: para que podamos navegar por la web normalmente en Safari, debemos asegurarnos de que Safari pueda mostrar el contenido normalmente cuando el dispositivo del usuario esté en cualquier orientación (también conocida como adaptativa), por lo que prohibimos a los desarrolladores bloquear el evento de cambio de orientación del navegador. Parece que Apple está en el camino correcto, y Apple no es una Apple cualquiera.
iOS ya prohíbe a los desarrolladores bloquear eventos de cambio de orientación, pero ¿qué pasa con Android? Lo siento, no encontré ninguna información que indique que Android prohíba a los desarrolladores bloquear el evento de cambio de orientación del navegador, pero de hecho es imposible evitar el evento de cambio de orientación del navegador en la plataforma Android.
11. Cómo detectar que el usuario inicia su aplicación web a través de la pantalla de inicio
Los estudiantes de la API de aplicaciones web de Apple saben que iOS proporciona a Safari la función de agregar una pantalla de inicio a la actual. página Presione Puede agregar la página actual a la pantalla de inicio del dispositivo presionando el pequeño signo más en la herramienta inferior del iphone ipod ipod touch, o presionando el pequeño signo más en la parte inferior izquierda del ipad, o el pequeño signo más en la. En la parte superior izquierda del ipad, el ícono de inicio de la página actual se agregará automáticamente a la pantalla de inicio del dispositivo. Haga clic en el ícono de inicio para iniciar su aplicación web de manera conveniente y rápida.
La mayor diferencia entre iniciar una aplicación web desde la pantalla de inicio y acceder a ella desde un navegador es que se borran las barras de herramientas en la parte superior e inferior del navegador, por lo que su aplicación web se parece más a una nanoaplicación. La mayor diferencia entre una aplicación web iniciada desde la pantalla de inicio y una aplicación web a la que se accede desde un navegador es que borra las barras de herramientas encima y debajo del navegador, por lo que su aplicación web se parece más a una aplicación nativa y la subimagen de navegación de la ventana allí. También hay diferencias en los atributos independientes de las generaciones. En iOS, navigator.standalone es falso cuando el navegador accede directamente a un sitio web y navigator.standalone es falso cuando se inicia una aplicación web desde la pantalla de inicio. Podemos usar la propiedad navigator.standalone para saber si el usuario está accediendo actualmente a la aplicación web desde la pantalla de inicio.
¡En Android, no existe tal cosa como agregar a la pantalla de inicio!
12. Cómo desactivar el uso de mayúsculas en el teclado en iOS
Sabemos que en iOS, cuando aparece el teclado virtual, el teclado tiene habilitada la función de mayúsculas de primera letra de forma predeterminada. Según En algunos escenarios empresariales, es posible que necesitemos desactivar esta función. La versión móvil de webkit proporciona el atributo autocapitalize para los elementos de entrada. Al especificar el atributo autocapitalize, el elemento de entrada puede especificar autocapitalize="off" y podemos desactivarlo. desactivar el uso de mayúsculas predeterminado del teclado.
13. Cómo prohibir completamente a los usuarios abrir páginas en ventanas nuevas en iOS
A veces es posible que necesitemos prohibir a los usuarios abrir páginas en ventanas nuevas. Podemos usar el target=". _self" de la etiqueta " para especificar que el usuario abra la página en una nueva ventana, o mantenga el atributo de destino vacío, pero encontrará que después de que el usuario de iOS mantenga presionado el enlace durante 3 segundos, iOS mostrará un botón lista, y el usuario aún puede abrir la página en la nueva ventana a través de estos botones Abra la página en. En este caso, el atributo de destino especificado por el desarrollador no es válido, pero puede especificar el atributo de estilo -webkit-touch-callout. del elemento actual a none. Sin embargo, también puede especificar el -webkit- El atributo de estilo de llamada táctil es none para impedir que iOS muestre estos botones. Esta tecnología sólo funciona en iOS, no en Android.
14. Cómo evitar que los usuarios guarden/copien imágenes en iOS
Mencionamos el atributo -webkit-touch-callout del elemento en el consejo n.° 13, pero marcamos el img - Especificar webkit-touch-callout como none también evita que el dispositivo muestre el botón de lista, lo que impide que los usuarios guarden/copien sus imágenes.
15. Cómo deshabilitar el texto seleccionado por el usuario en iOS
Podemos deshabilitar el texto seleccionado por el usuario en iOS especificando el atributo -webkit-user-select de la etiqueta de texto como none. .
16. Cómo obtener el valor de la barra de desplazamiento en iOS
Los navegadores de escritorio quieren obtener el valor de la barra de desplazamiento a través de document.scrollTop y document.scrollLeft, pero en iOS. Encontrarás que ambas propiedades no están definidas, ¿por qué? Debido a que no existe el concepto de barras de desplazamiento en iOS, y en Android generalmente puede obtener el valor de la barra de desplazamiento a través de estas dos propiedades, entonces, ¿cómo obtenemos el valor de la barra de desplazamiento en iOS?
A través de window.scrollY y window.scrollX, podemos obtener los valores de la barra de desplazamiento del eje y y del eje x de la ventana actual.
17. Cómo resolver el problema de desbordamiento del borde del cuadro
Cuando especificas un elemento a nivel de bloque y defines un borde para él, establece su ancho en 100%.
Durante el proceso de desarrollo de dispositivos móviles, generalmente definimos el ancho del cuadro de texto como 100% y lo definimos como un elemento a nivel de bloque para lograr un estilo adaptativo de pantalla completa, pero en este momento encontrará que el borde (izquierdo y derecha) del elemento tendrá 1 píxel cada uno. Desbordará el documento, lo que provocará que aparezca una barra de desplazamiento horizontal. Para resolver este problema, podemos agregar un estilo especial -webkit-box-sizing:border-box; cuadro que incluye el ancho del borde.
18. Cómo resolver el problema de las esquinas redondeadas en la plataforma Android 2.0
Si eres lo suficientemente cuidadoso, al desarrollar sitios web wap, deberías encontrar problemas especiales en Android. Plataforma 2.0, como el problema de las esquinas redondeadas.
A la hora de definir las esquinas redondeadas de un elemento, para que sea totalmente compatible con plataformas inferiores a Android 2.0, debemos seguir los siguientes consejos. 0, debemos seguir las siguientes técnicas para definir las esquinas redondeadas del borde:
1＼Se debe agregar el prefijo -webkit (no se puede agregar en iOS, pero sí en android). );
2＼Si la definición de estilo del borde de destino, como border:border:border:border:border:border:border:border:border:border:corner definición de estilo, como border: 1px solid #000;, entonces el atributo-webkit -border-radius debe ir después del atributo de borde.
3 Si tenemos un elemento visual con las esquinas superior izquierda y superior derecha redondeadas, primero debemos definir el global (valor redondeado de 4 esquinas) -webkit-border-radius:5px;, y luego cubrir el esquina inferior izquierda a su vez esquina y esquina inferior derecha, -webkit-border-bottom-left-radius: 0; -webkit-order-radius: 1px solid #000;, luego -webkit-border-radius debe aparecer después del atributo de borde . 0;-webkit- border-bottom-right-border:0;De lo contrario, todos los ángulos rectos se mostrarán en plataformas con Android 2.0, ¡y recuerda! ¡Se debe agregar el prefijo -webkit!
19. Cómo resolver el problema de que la página no puede ser adaptable en la plataforma Android
Aunque tu html y css son completamente adaptables, un día descubres que tu página es The La visualización en Android no es adaptable. Primero, asegúrese de que su etiqueta principal contenga la siguiente metaetiqueta:
& lt;meta name="viewport" content="width=device-width,initial-scale. =1.0, Maximum-scale=1.0,user-scalable=0;" />
Si es así, verifique cuidadosamente si el atributo tiene un valor ancho = ancho del dispositivo. Si no, agréguelo inmediatamente !
20. ¿Cómo solucionar el problema de que la versión iOS 4.3 de Safari reconoce automáticamente los números de 5 dígitos en la página y agrega estilos automáticamente?
El nuevo sistema iOS es la versión 4.3, lo cual no tiene ningún problema con Safari. La actualización causó un error: incluso si agrega la siguiente metaetiqueta, Safari reconocerá automáticamente los números consecutivos de 5 dígitos en la página y volverá a representar el estilo, lo que significa que su CSS no es válido. para esta etiqueta.
Podemos resolver este problema de una manera bastante desagradable.
Por ejemplo, cuando mostramos la etiqueta de monto en el sitio web Alipay wap, la reescribimos de la siguiente manera:
$
HTML5, CSS3, JAVASCRIPT, JQUERY desarrollo front-end tutorial avanzado desarrollo front-end push ¡Bienvenidos a seguirnos!