1. Al mirar la imagen de fondo con un navegador Android, algunos dispositivos se borrarán.
Está muy claro en una PC con la misma proporción de imágenes, pero está muy borrosa en el teléfono. ¿Cuál es la razón?
Después de la investigación, fue el DevicePixelratio el que causó el problema. Debido a que la resolución del teléfono móvil es demasiado pequeña, si la página web se muestra de acuerdo con la resolución, las palabras serán muy pequeñas. Por lo tanto, Apple mostró inicialmente la resolución del 960640 del iPhone 4 en la página web, por lo que DevicePixelRatio = 2. Ahora Android es bastante complicado, con 1.5, 2 y 3.
Si desea que la imagen se muestre más claramente en su teléfono, debe usar una imagen de fondo 2x en lugar de la etiqueta IMG (generalmente, 2 veces). Por ejemplo, el ancho y la altura de un DIV son 100100, la imagen de fondo debe ser 200200 y luego el tamaño de fondo: contener;, para que la imagen mostrada sea más clara.
El código puede ser el siguiente:
Antecedentes: URL (../ Images/icon/All.png) Centro de centro sin repetición; -Webkit-Background-size: 50px 50px; tamaño de fondo: 50px 50px; Display: Inline-Block; Ancho: 100%; Altura: 50px;
O especificar el tamaño de fondo: contener; ¡O bien, pruébalo!
2. Carga de imágenes
Si encuentra el problema de la carga de imagen lenta, en este caso, el desarrollo de teléfonos móviles generalmente usa el método de lienzo para cargar:
Para la API de lienzo específica, consulte: http://javascript.ruanyifeng.com/htmlapi/canvas.html
Aquí hay un ejemplo de un lienzo:
<li> <Canvas> </Canvas> </li>
JS Cargando dinámicamente fotos y Li. ¡Se dan un total de 17 fotos!
var en total = 17; var zwin = $ (ventana); var render = function () {var padding = 2; var winWidth = zwin.width (); var picWidth = Math.floor ((WinWidth-Padding*3)/4); var tmpl = ''; for (var i = 1; i <= totla; i ++) {var p = padding; var imgsrc = 'img/'+i+'. jpg'; if (i%4 == 1) {p = 0; } TMPL+= '<li> <Canvas id = "CVS _'+i+'"> </Canvas> </li>'; var imageBj = new image (); imageBJ.Index = i; imageBj.Onload = function () {var cvs = $ ('#cvs _'+this.index) [0] .getContext ('2d'); cvs.width = this.width; cvs.Height = this.Height; cvs.DrawImage (esto, 0,0); } imageBj.src = imgsrc; } } prestar();3. Si el sitio web móvil no necesita ser compatible con el navegador IE, generalmente usamos ZeptOJs . Método de eventos táctiles construidos de Zeptojs, consulte http://zeptojs.com/#touch eventos
Eché un vistazo a la nueva versión de la API Zeptio, que ya admite IE10 o por encima de los navegadores, ¡y puede elegir usar ZeptOJs!
4. Evite que las páginas web se amplíen y se reduzcan en teléfonos móviles . Este es el punto más básico. Lo que los desarrolladores de sitios web móviles más deben saber es configurar la vista en Meta.
Además, hemos visto la siguiente declaración en algunos sitios web móviles:
La copia del código es la siguiente:
<! Doctype html public "-// wapforum // dtd xhtml mobile 1.0 // en" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd">
La forma de establecer DTD es XHTML. Si nuestra página usa HTML5, puede declarar directamente <! DOCTYPE HTML> sin configurar DTD.
Use la vista para evitar que la página se acercara. Por lo general, establezca el usuario escalable en 0 para desactivar la escala del usuario de la vista de página.
<Meta name = "Viewport" Content = "User-Scalable = 0" />
Pero para una mejor compatibilidad, utilizaremos la configuración completa de la vista.
La copia del código es la siguiente:
<Meta name = "Viewport" Content = "Width = Device-width, inicial a escala = 1.0, máxima escala = 1.0, user-escalable = 0" />
Por supuesto, el usuario escalable = 0, y algunas personas también escriben usuarios de usuario = no, los cuales están bien.5. Apple-Mobile-Web-appable
Apple-Mobile-Web-app-Capable es establecer si la aplicación web se ejecuta en modo de pantalla completa.
gramática:
<meta name = "Apple-Mobile-Web-App-Capable" Content = "Yes">
ilustrar:
Si el contenido está configurado en Sí, la aplicación web se ejecutará en modo de pantalla completa, de lo contrario, no lo hará. El valor predeterminado del contenido es no, lo que indica la pantalla normal. Puede usar la ventana de propiedad de solo lectura.navigator.standalone para determinar si la página web se muestra en modo de pantalla completa.
6. Detección de formato
La detección de formatos habilita o deshabilita el número de teléfono en la página de reconocimiento automático.
gramática:
<meta name = "format-detection" content = "phone = no">
ilustrar:
Por defecto, el dispositivo reconoce automáticamente cualquier cadena que pueda ser un número de teléfono. Configuración del teléfono = No puede deshabilitar esta característica.
7. HTML5 llama a la función de marcación de Android o iOS
HTML5 proporciona etiquetas que llaman automáticamente a la marcación, simplemente agregue Tel: en el href de la etiqueta una etiqueta.
como sigue:
<a href = "Tel: 4008106999,1034"> 400-810-6999 recurrir a 1034 </a>
Llame a su teléfono directamente de la siguiente manera
<a href = "Tel: 15677776767"> Haga clic para llamar al 15677776767 </a>
8. Función de posicionamiento HTML5GPS
Para obtener más detalles, consulte: //www.vevb.com/post/html5_gps_getcurrentPosition
9. Al tirar de la barra de desplazamiento hacia arriba y hacia abajo, está atascado o lento
cuerpo {-webkit-superflow-scrolling: touch; Describe de desbordamiento: touch;}Android3+ e iOS5+ soporta CSS3 Los nuevos atributos están desplazando el desbordamiento
10. Copiar o seleccionar el texto está prohibido
Elemento {-webkit-user-select: none; -Moz-User-Select: Ninguno; -khtml-user-select: ninguno; Usuario-selección: ninguno;}Resuelva el texto de la página que se puede seleccionar para dispositivos móviles (dependiendo de las necesidades del producto)
11. Mantenga presionada la página durante mucho tiempo y bloquee
elemento {-webkit-touch-challout: none;}12. Sombras predeterminadas en el cuadro de entrada en iPhone y iPad
Elemento {-webkit -apariencia: ninguno; }13. Aparece la máscara gris translúcida al tocar elementos bajo iOS y Android
Elemento {-webkit-tap-highlight-color: rgba (255,255,255,0)}Establecer el valor alfa en 0 puede eliminar la máscara gris translúcida. Nota: El valor de la propiedad de transparente no es válido en Android.
El siguiente artículo tiene una introducción detallada, dirección: http://www.vevb.com/post/phone_web_ysk
14. El procesamiento de compatibilidad activa es pseudo-clase: activo inválido
Método 1: Agregue OnTouchStart al cuerpo
<Body OnTouchStart = "">
Método 2: JS vincula eventos de touchstart o touchend para documentar
<style> a {color: #000;} a: activo {color: #fff;} </style> <a herf = foo> bar </a> <script> document.addeventListener ('touchStart', function () {}, false); </script>;15. Definición de animación 3D habilita la aceleración de hardware
Elemento {-webkit -transform: traduce3d (0, 0, 0) transformación: traduce3d (0, 0, 0);}Nota: la deformación 3D consumirá más memoria y potencia
16. 1px Border de la pantalla Retina
Elemento {border-width: delgado;}17. Procesamiento compatible con máscara de WebKit
Algunos teléfonos de gama baja no admiten la máscara CSS3, y se pueden rebajar opcionalmente.
Por ejemplo, puede usar el juicio JS para referirse a diferentes clases:
if ('webkitmask' en document.documentelement.style) {alerta ('S Support Mask');} else {alert ('no es compatible con máscara');}18. Problemas de ajuste del tamaño de fuente al girar la pantalla
HTML, cuerpo, forma, Fieldset, P, Div, H1, H2, H3, H4, H5, H6 {-webkit-text-size-adjust: 100%;}19. Pantalla flash de transición
/Establezca cómo se representan los elementos incrustados en el espacio 3D: preservar el estilo 3D/-Webkit-Transform: Preserve-3D;/Establezca si la parte posterior del elemento que se convierte es visible cuando se enfrenta al usuario: Hide/-Webkit-Backface-visibilidad: Hidden;
20. Error de la esquina redonda
Algunos teléfonos Android han fallado
Clip de fondo: Box de relleno;
21. Color de fondo de la barra de estado superior
<meta name = "Apple-Mobile-Web-App-status-Bar-Style" Content = "Black" />
ilustrar:
A menos que primero use Apple-Mobile-Web-APP-APP para especificar el modo de pantalla completa, esta metaetiqueta no funcionará.
Si el contenido está configurado en predeterminado, la barra de estado se mostrará normalmente. Si se establece en blanco, la barra de estado tendrá un fondo negro. Si se establece en blanco-translucente, la barra de estado parece negra translúcida. Si se establece en predeterminado o en blanco, la página se muestra debajo de la barra de estado, es decir, la barra de estado ocupa la parte superior y la página ocupa la parte inferior. Ambos no están bloqueados por la otra parte o están bloqueados. Si se establece en Blank-Translucent, la página llena la pantalla, donde la parte superior de la página está cubierta por la barra de estado (cubre la altura de la página en 20px, mientras que la pantalla Retina para iPhone4 e iTouch4 es 40px). El valor predeterminado es predeterminado.
22. Configurar caché
<meta http-oquiv = "cache-control" content = "no-cache" />
Las páginas móviles generalmente se almacenan en caché después de la primera carga, y cada actualización usa el caché en lugar de reenviar la solicitud al servidor. Si no desea usar caché, puede configurar No-Cache.
23. Iconos de escritorio
<link rel = "Apple-touch-icon" href = "touch-icon-iPhone.png" /> <link rel = "Apple-touch-icon" tames = "76x76" href = "touch-icon-ipad.png" /> <link rel = "Apple-touch-iCon" tames = "120x120" href = "touch-iPhon-retina" /> <link rel = "Apple-touch-icon" tames = "152x152" href = "touch-icon-ipad-retina.png" />
Defina diferentes iconos de escritorio para diferentes dispositivos en iOS. Si no se define, use la captura de pantalla actual como icono.
Se puede pensar que el método de escritura anterior tiene un brillo predeterminado. ¡El siguiente método de configuración puede eliminar el efecto de brillo y restaurar el efecto del dibujo del diseño!
<Link rel = "Apple-touch-icon-precomed" href = "touch-icon-iphone.png" />
El tamaño de la imagen se puede configurar en 5757 (PX) o Retina se puede configurar en 114114 (PX), y el tamaño del iPad es 72*72 (PX)
24. Pantalla de inicio
<link rel = "Apple-touch-startup-image" href = "start.png"/>
La imagen que se muestra cuando la página comienza a cargarse en iOS es evitar la pantalla blanca al cargar.
Se pueden especificar diferentes tamaños a través de la matriz:
< (-Webkit-Device-Pixel-Ratio: 2) "rel =" Apple-touch-startup-image " /> <!-iPhone 5-> <link rel =" Apple-touch-startup-image "medios =" (dispositivo-width: 320px) y (dispositivo-height: 568px) y (-weBkit-device-pixel-ratio: 2) "" "" "" "" "" "" "" "" "" href = "Apple-touch-startup-iMage-640x1096.png"> <!-iPad Retritin-> <link href = "Apple-touch-startup-iMage-768x1004.png" medios = "(width de dispositivo: 768px) y (orientación: retrato)" rele-touch-startup-image " /> <!--ipsSEan href = "Apple-touch-startup-image-748x1024.png" medios = "(width de dispositivo: 768px) y (orientación: paisaje)" rel = "Apple-touch-startup-image" /> <!-iPad retina retrato-> <enlace href = "apple-startup-image-1536x2008.png" medios de retrato "(dispositivos href =" iDates 1536px) y (Orientación: Retrato) y (-webkit-Device-Pixel-Ratio: 2) "rel =" Apple-touch-startup-image " /> <!-iPad retina Landscape-> <link href =" Apple-touch-startup-iMage-1496x2048.png "(medios de dispositivos: 1536px) (-Webkit-Device-Pixel-Ratio: 2) "Rel =" Apple-Touch-startup-Image " />
25. navegador privado y otro meta
¡Los siguientes atributos no se han aplicado en el proyecto, puede escribir una demostración para probar lo siguiente!
Navegador QQ privado
Modo de pantalla completa
<meta name = "x5-fullscreen" content = "true">
Pantalla vertical forzada
<meta name = "x5-orientation" content = "retrat">
Pantalla horizontal forzada
<meta name = "x5-orientation" content = "paisaje">
Modo de aplicación
<meta name = "x5-page-mode" content = "app">
Navegador UC privado
Modo de pantalla completa
<meta name = "Full-Screen" Content = "Yes">
Pantalla vertical forzada
<meta name = "screen-orientation" content = "retrato">
Pantalla horizontal forzada
<meta name = "pantalla-orientación" content = "paisaje">
Modo de aplicación
<meta name = "browsermode" content = "aplicación">
otro
Optimizado para dispositivos portátiles, principalmente para algunos navegadores antiguos que no reconocen las vistas, como BlackBerry
<meta name = "handheldfiendly" content = "true">
El antiguo navegador de Microsoft
<meta name = "mobileOptimize" content = "320">
Haga clic en Windows Phone sin resaltar
<meta name = "msapplication-tap-highlight" content = "no">
26. Keyup, Keydown y KeyPress Support en iOS no es muy bueno
El problema es este: cuando se usa búsqueda de entrada para búsqueda difusa, ingrese palabras clave en el teclado y consulte a través del fondo de AJAX, luego devuelva los datos y luego marque las palabras clave para los datos devueltos rojos. Está bien usar la entrada para monitorear los eventos de teclado de teclado en los navegadores móviles Android, pero se pone rojo muy lentamente en los navegadores móviles iOS. Después de ingresar usando el método de entrada, el evento clave no corresponde de inmediato. ¡Solo puede ser correspondiente después de la eliminación!
Solución:
Puede usar el evento OnInput de HTML5 para reemplazar la tecla
<input type = "text" id = "testInput"> <script type = "text/javaScript"> document.getElementById ('testInput'). AddEventListener ('input', function (e) {var valor = e.target.value;}); </script>¡Entonces lograrás un efecto clave!
27. El problema de configurar la entrada del sitio web H5 al tipo = número
Establecer el tipo de entrada de la página web H5 en el número generalmente causa tres problemas. Un problema es que el atributo MaxLength no es fácil de usar. El otro es que cuando se envía el formulario, se redondea de forma predeterminada. Tercero, algunos teléfonos Android tienen problemas de estilo.
Una vez que se resuelve el problema, actualmente estoy usando JS. como sigue
<input type = "number" onInput = "checkTextLength (this, 10)"> función checkTextLength (obj, longitud) {if (obj.value.length> longitud) {obj.value = obj.value.substr (0, longitud); }}La pregunta 2 se debe a que el envío del formulario predeterminado se encuentra a la verificación del formulario, el predeterminado de paso es 1 y el atributo de paso debe establecerse. Si se conservan 2 lugares decimales, el método de escritura es el siguiente:
<input type = "number" step = "0.01" />
Con respecto a Step, daré una breve introducción aquí. En el número de tipo de entrada = número, generalmente se generará automáticamente una flecha hacia arriba y hacia abajo. Al hacer clic en la flecha hacia arriba, agregará un paso de forma predeterminada. Al hacer clic en la flecha hacia abajo, reducirá un paso de forma predeterminada. El paso predeterminado en número es 1. Es decir, paso = 0.01, puede permitir la entrada de 2 decimales y hacer clic en las flechas hacia arriba y hacia abajo para aumentar 0.01 y disminuir 0.01 respectivamente.
Si el paso y el min se usan juntos, el valor debe ser entre Min y Max.
Vea el siguiente ejemplo:
<input type = "number" step = "3.1" min = "1" />
¿Qué números se pueden ingresar en el cuadro de entrada?
Primero, si el valor mínimo es 1, puede ingresar 1.0, el segundo es ingresar (1+3.1), es decir 4.1, y así sucesivamente, cada clic en la flecha hacia arriba y hacia abajo aumentará o disminuirá en 3.1, y la entrada otros números no serán válidos. Esta es la breve introducción al paso.
Pregunta 3: Eliminar el estilo de entrada predeterminado
Entrada [type = number] {-Moz-Agarance: textField;} input [type = number] ::-webkit-inner-spin-button, input [type = number] ::-Webkit -uter-spin-button {-webkit-apariencia: ninguno; margen: 0;}28. El estilo de botón de entrada de configuración de iOS se sobrescribirá por el estilo predeterminado
La solución es la siguiente:
entrada, TextAREA {Border: 0; -Webkit-apariencia: ninguna; }Establezca el estilo predeterminado en ninguno
29. Entrada de letra del teclado iOS, capitalización de letra inicial predeterminada
Solución: Establezca las siguientes propiedades
<input type = "text" autocapitalize = "Off" />
30. Seleccione desplegable Seleccione Establecer la alineación de la derecha
La configuración es la siguiente:
Seleccione la opción {Dirección: rtl;}31. La deformación de sesgo se realiza a través de la transformación, la rotación de rotación causará irregularidad
Se puede establecer de la siguiente manera:
-webkit-transform: rotar (-4deg) skew (10deg) traducez (0); transformación: rotar (-4deg) sesgo (10deg) traducez (0); Esquema: 1px sólido RGBA (255,255,255,0)
32. Mobile Haga clic en el retraso de 300 ms
300 ms todavía es aceptable, pero debemos resolver el problema causado por 300 ms. 300 ms hace que la experiencia del usuario no sea muy buena. Para resolver este problema, generalmente usamos eventos TAP para reemplazar los eventos de clic en el lado móvil.
Se recomiendan dos js, uno es rápido y el otro es tap.js
Para un retraso de 300 ms, consulte: http://thx.github.io/mobile/300ms-click-delay/
33. Problema de penetración de punto final móvil
Los ejemplos son los siguientes:
<div id = "haorooms"> test de eventos de asentimiento </div> <a href = "www.vevb.com"> www.vevb.com </a>
El DIV es la máscara de posición absoluta, y el índice Z es más alto que a. La etiqueta A es un enlace en la página, vinculamos el evento TAP al DIV:
$ ('#harooms'). on ('tap', function () {$ ('#haraoms'). hide ();});Cuando hacemos clic en la capa de máscara, el DIV desaparece normalmente, pero cuando hacemos clic en la capa de máscara en la etiqueta A, encontramos que el enlace A se activa, que se llama evento de punto.
razón:
TouchStart precede Touchend precede Click. Es decir, el activación de clics se retrasa y esta vez es de aproximadamente 300 ms. Es decir, la máscara está oculta después de que nuestros disparadores se desencadenan. En este momento, el clic no se ha activado. Después de 300 ms, nuestro clic se desencadena al siguiente enlace porque la máscara está oculta.
resolver:
(1) Intente usar el evento táctil para reemplazar el evento de clic. Por ejemplo, use el evento Touchend (recomendado).
(2) Use FastClick, https://github.com/ftlabs/fastclick
(3) Use PreventDefault para bloquear el clic de una etiqueta
(4) retrasar un cierto tiempo (300 ms+) para manejar eventos (no recomendados)
(5) Lo anterior generalmente se puede resolver, pero si realmente no funciona, será reemplazado por un incidente de clic.
El siguiente es el evento Touchend, como sigue:
$ ("#harooms"). on ("touchend", function (event) {event.preventDefault ();});34. Elimine el número de bifurcación en IE10
Entrada: -ms-Clar {display: none;}35. Con respecto a la optimización de fuentes en iOS y OS X (habrá en negrita de fuentes inconsistentes en las pantallas horizontales y verticales, etc.)
El tamaño de la fuente se restablecerá cuando el navegador iOS esté ajardinado. Establecer el ajuste de texto de texto a ninguno puede resolver el problema en iOS, pero la función de escala de fuente de Safari en la versión de escritorio no será válida, por lo que la mejor solución es convertir el ajuste de texto de texto al 100%.
-Webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%; text-size-ajust: 100%;
36. Acerca del sistema iOS, al ingresar inglés con el método de entrada china, puede aparecer un espacio de una sexta parte entre las letras.
Se puede eliminar por regular
this.Value = this.value.replace (// u2006/g, '');
37. Problema de falla de autoplaz de audio móvil HTML5
Este no es un error. Dado que reproducir automáticamente audio o video en páginas web causará algunos problemas o consumo de tráfico innecesario a los usuarios, los sistemas Apple y Android generalmente prohíben la reproducción automática y la reproducción activada utilizando JS. Debe ser activado por el usuario antes de que se pueda jugar.
Solución: Primero toque el usuario de touchStart, el activador de la reproducción y la pausa (el audio comienza a cargarse y luego usa JS para operarlo nuevamente).
Código de solución:
document.adDeventListener ('touchStart', function () {document.getElementsBytagName ('audio') [0] .play (); document.getElementsByTagName ('audio') [0] .Pause ();});38. El problema del marcador de posición no es compatible con la fecha de entrada móvil HTML5
No creo que haya una buena solución para esto, use el siguiente método.
La copia del código es la siguiente:
<input placeHolder = "date" type = "text" onfocus = "(this.type = 'date')" id = "date">
¡Es posible que algunos navegadores necesiten hacer clic dos veces!39. Algunos modelos tienen entrada con la búsqueda de tipo, y se proporciona su propio método de modificación de estilo de botón de cierre.
Algunos modelos de controles de entrada de búsqueda vendrán con un botón de cierre (un pseudo elemento), y generalmente para ser compatibles con todos los navegadores, implementaremos uno por nosotros mismos. En este momento, el método para eliminar el botón de cierre nativo es
#Search ::-WebKit-Search-Cancel-Button {Display: None; }Si desea usar el botón Native Close y desea que se ajuste al estilo de diseño, puede modificar el estilo de este pseudoelemento.
40. Fomente la opción de expandir
Método Zepto:
$ (sltelement) .trgger ("mouseDown");Método JS nativo:
function showDropDown (sltelement) {eviente var; event = document.createEvent ('MouseEvents'); event.initMouseEvent ('Mousedown', verdadero, verdadero, ventana); sltelement.dispatcheVent (evento);};