1. Ao olhar para a imagem de fundo com um navegador Android, alguns dispositivos ficarão embaçados.
É muito claro em um PC com a mesma proporção de imagens, mas é muito embaçado no telefone. Qual é o motivo?
Após a pesquisa, foi o devicePixelratio que causou o problema. Como a resolução do telefone celular é muito pequena, se a página da web for exibida de acordo com a resolução, as palavras serão muito pequenas. Portanto, a Apple exibiu inicialmente a resolução do 960640 do iPhone 4 na página da web, então DevicePixelratio = 2. Agora, o Android está bastante confuso, com 1,5, 2 e 3.
Se você deseja que a imagem seja exibida com mais clareza no seu telefone, use uma imagem de fundo 2x em vez da tag IMG (geralmente, 2 vezes). Por exemplo, a largura e a altura de uma div são 100100, a imagem de fundo deve ser 200200 e depois o tamanho de fundo: contém;, para que a imagem exibida seja mais clara.
O código pode ser o seguinte:
Antecedentes: URL (../ imagens/icon/all.png) Centro central de repetição; -Webkit-background-size: 50px 50px; tamanho de fundo: 50px 50px; display: bloqueio em linha; largura: 100%; Altura: 50px;
Ou especifique o tamanho de fundo: conter; Ou, por favor, experimente!
2. Carregamento da imagem
Se você encontrar o problema do carregamento lento da imagem, neste caso, o desenvolvimento de telefones móveis geralmente usa o método Canvas para carregar:
Para a API de tela específica, consulte: http://javascript.ruanyifeng.com/htmlapi/canvas.html
Aqui está um exemplo de tela:
<li> <VAS> </lvas> </li>
JS carregando dinamicamente fotos e li. Um total de 17 fotos são dadas!
var total = 17; var zwin = $ (janela); var render = function () {var de preenchimento = 2; var winWidth = zwin.width (); var picWidth = Math.Floor ((WinWidth-Padding*3)/4); var tmpl = ''; for (var i = 1; i <= totla; i ++) {var p = preenchimento; var imgsrc = 'img/'+i+'. jpg'; if (i%4 == 1) {p = 0; } tmpl+= '<li> <canvas id = "cvs _'+i+'"> </canvas> </li>'; var imageObj = new Image (); imageObj.index = i; imageObj.onload = function () {var cvs = $ ('#cvs _'+this.index) [0] .getContext ('2d'); cvs.width = this.width; cvs.Height = this.Height; cvs.Drawimage (isto, 0,0); } imageObj.src = imgsrc; }} render ();3. Se o site móvel não precisar ser compatível com o navegador do IE, geralmente usamos o Zeptojs . Método de eventos de toque interno de Zeptojs, consulte http://zeptojs.com/#toch eventos
Dei uma olhada na nova versão da ZEPTIO API, que já suporta o IE10 ou acima dos navegadores, e você pode optar por usar o Zeptojs!
4. Evite que as páginas da web aumentem e encolhem em telefones celulares . Este é o ponto mais básico. O que os desenvolvedores de sites móveis devem saber mais é configurar a Viewport no Meta.
Além disso, vimos a seguinte declaração em alguns sites móveis:
A cópia do código é a seguinte:
<!
A maneira de definir DTD é XHTML. Se nossa página usar o HTML5, você poderá declarar diretamente <! Doctype html> sem definir o DTD.
Use a viewport para impedir que a página aumente o zoom. Geralmente, defina o usuário para 0 para desativar o escala do usuário da visualização da página.
<meta name = "viewport" content = "user-scalable = 0" />
Mas para melhor compatibilidade, usaremos as configurações completas de viewport.
A cópia do código é a seguinte:
<meta name = "viewport" content = "width = largura do dispositivo, escala inicial = 1,0, escala máxima = 1,0, scalable = 0" />
Obviamente, Scalable = 0, e algumas pessoas também escrevem Scalable = Não, ambas as quais estão ok.5. Apple-Mobile-Web-Appable
Apple-Mobile-Web-Appable é definir se o aplicativo da Web é executado no modo de tela inteira.
gramática:
<meta name = "Apple-Mobile-Web-Appable" Content = "Sim">
ilustrar:
Se o conteúdo estiver definido como sim, o aplicativo da Web será executado no modo de tela inteira, caso contrário, não será. O valor padrão do conteúdo é não, indicando exibição normal. Você pode usar a propriedade da propriedade somente leitura.navigator.standalone para determinar se a página da web é exibida no modo de tela inteira.
6. Detecção de formato
A detecção de formato permite ou desativa o número de telefone na página de reconhecimento automático.
gramática:
<meta name = "formato-detecção" content = "telefone = não">
ilustrar:
Por padrão, o dispositivo reconhece automaticamente qualquer string que possa ser um número de telefone. Definir telefone = não pode desativar esse recurso.
7. HTML5 chama a função de discagem do Android ou iOS
O HTML5 fornece tags que chamam de discagem automática automaticamente, basta adicionar tel: no href da tag a tag.
do seguinte modo:
<a href = "Tel: 4008106999,1034"> 400-810-6999 Vire para 1034 </a>
Ligue diretamente para o seu telefone da seguinte maneira
<a href = "Tel: 15677776767"> Clique para ligar para 15677776767 </a>
8. Função de posicionamento HTML5Gps
Para detalhes, consulte: //www.vevb.com/post/html5_gps_getcurrentposition
9. Ao puxar a barra de rolagem para cima e para baixo, está preso ou lento
corpo {-webkit-overflow-rolling: touch; rolagem de transbordamento: touch;}Android3+ e iOS5+ suportam novos atributos CSS3 estão rolando de transbordamento
10. Copiar ou selecionar texto é proibido
Elemento {-webkit-user-select: nenhum; -Moz-User-Select: Nenhum; -khtml-user-select: nenhum; Seleção de usuário: Nenhum;}Resolva o texto da página que pode ser selecionado para dispositivos móveis (dependendo das necessidades do produto)
11. Pressione e segure a página por um longo tempo e falha
elemento {-webkit-touch-calout: Nenhum;}12. Sombras padrão na caixa de entrada sob iPhone e iPad
Elemento {-Webkit -Aparência: Nenhum; }13. Máscara cinzenta translúcida aparece ao tocar em elementos sob iOS e Android
Elemento {-Webkit-Tap-Highlight-Color: RGBA (255.255,255,0)}Definir o valor alfa como 0 pode remover a máscara cinza translúcida. Nota: O valor da propriedade do transparente é inválido no Android.
O artigo a seguir tem uma introdução detalhada, endereço: http://www.vevb.com/post/phone_web_ysk
14. Processamento de compatibilidade ativa é pseudo-classe: ativo inválido
Método 1: Adicione otechstart ao corpo
<Body OnTouchstart = "">
Método 2: JS liga os eventos TouchStart ou Touhend para documentar
<estilo> a {color: #000;} a: ativo {color: #fff;} </style> <a herf = foo> bar </a> <cript> document.addeventListener ('touchstart', function () {}, false); </script>15. Definição de animação 3D Permite a aceleração do hardware
Elemento {-webkit -transform: translate3d (0, 0, 0) Transform: translate3d (0, 0, 0);}Nota: a deformação 3D consumirá mais memória e poder
16. Borda de 1px da tela Retina
Elemento {largura da borda: Thin;}17. Processamento compatível com máscara de webkit
Alguns telefones baixos não suportam máscara CSS3 e podem ser rebaixados opcionalmente.
Por exemplo, você pode usar o julgamento do JS para se referir a diferentes classes:
if ('webkitMask' em document.documentElement.style) {alert ('s de máscara de suporte');} else {alert ('s não suportada máscara');}18. Questões de ajuste do tamanho da fonte ao girar a tela
html, corpo, forma, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust: 100%;}19. Tela do flash de transição
/Defina como os elementos incorporados são renderizados no espaço 3D: preserve o estilo 3D/-Webkit-transform: preserve-3d;/Defina se a parte traseira do elemento que é convertida é visível ao enfrentar o usuário: ocultar/-webkit-backface-visibilidade: oculta;
20. Bug redondo de canto
Alguns telefones Android tiveram cantos arredondados
clipe de fundo: caixa de preenchimento;
21. Cor de fundo da barra de status superior
<meta name = "Apple-Mobile-Web-App-Status-Bar-Bar" Content = "Black" />
ilustrar:
A menos que você use primeiro a capacidade de Apple-Mobile-Web-App para especificar o modo de tela inteira, essa meta tag não funcionará.
Se o conteúdo estiver definido como padrão, a barra de status será exibida normalmente. Se definido como em branco, a barra de status terá um fundo preto. Se definido como translútei em branco, a barra de status parece preta translúcida. Se definido como padrão ou em branco, a página é exibida abaixo da barra de status, ou seja, a barra de status ocupa a parte superior e a página ocupa a parte inferior. Ambos não são bloqueados pela outra parte ou estão bloqueados. Se definido como translútei em branco, a página preenche a tela, onde a parte superior da página é coberta pela barra de status (ela cobre a altura da página por 20px, enquanto a tela da retina para iPhone4 e ITouch4 é 40px). O valor padrão é padrão.
22. Configure o cache
<meta http-equiv = "cache-control" content = "no-cache" />
As páginas móveis geralmente são armazenadas em cache após a primeira carga, e cada atualização usa o cache em vez de renderizar a solicitação ao servidor. Se você não deseja usar o cache, poderá definir sem cache.
23. ícones da área de trabalho
<link rel = "Apple-touch-icon" href = "touch-icon-phone.png" /> <link rel = "maçã-touch-icon" tames = "76x76" href = "touch-icon-ipad.png" /> <link Rel = Apple-touch-icon "e" 120x120 " /> <link rel = "Apple-Touch-icon" tamanhos = "152x152" href = "touch-icon-pad-tina.png" />
Defina diferentes ícones de desktop para diferentes dispositivos no iOS. Se não for definido, use a captura de tela atual como o ícone.
Pensa -se que o método de escrita acima tenha um brilho padrão. O método de configuração a seguir pode remover o efeito de brilho e restaurar o efeito do desenho do design!
<link rel = "Apple-Touch-icon-PrecoMpoused" href = "touch-icon-iphone.png" />
O tamanho da imagem pode ser definido como 5757 (px) ou retina pode ser definido como 114114 (px), e o tamanho do iPad é 72*72 (px)
24. Tela inicial
<link rel = "Apple-Touch-Startup-Image" href = "start.png"/>
A imagem exibida quando a página é iniciada para carregar no iOS é evitar a tela branca ao carregar.
Tamanhos diferentes podem ser especificados através da Matrix:
<!-iPhone-> <link href = "maçã-touch-startup-image-320x460.png" mídia = "(largura de dispositivo: 320px)" rel = "maçã-touch-startup-image" /> <!-iphone retina-> <link href = "touch-touch-startup-image-640x90x20x20x20x20x20x20h20s /midrifth) (link (links-touch-touch-startup-image-640x20x20) (-webkit-device-pixel-ratio: 2) "rel =" maçã-touch-startup-image " /> <!-iPhone 5-> <link rel =" maçã-touch-start-image "Media =" (-width: 320px) e (Device-Hight: 568Px) e (-webkit-D-Dervice-PX) e (Device-Hight: 568O:) e (-width: href = "maçã-touch-startup-image-640x1096.png"> <!-ipad retrato-> <link href = "maçã-touch-startp-image-768x1004.png" mídia = "(width d'us-width: 768px) e (orientação)-") href = "maçã-touch-startup-image-748x1024.png" mídia = "(largura do dispositivo: 768px) e (orientação: paisagem)" rel = "Apple-touch-startup-image" /> <!-ipad retina retrato-> <link href = "apple-touch-startup-image-1566666666666666666666666666666666666666 (link href =" Apple-touch ") <! 1536px) e (orientação: retrato) e (-webkit-device-pixel-ratio: 2) "rel =" maçã-touch-startup-image " /> <!-ipad retina cenário-> <link href =" Apple-touch-start-setup-1496x2048.png "" (-webkit-device-pixel-ratio: 2) "rel =" Apple-Touch-Startup-Image " />
25. Navegador privado e outro meta
Os seguintes atributos não foram aplicados no projeto, você pode escrever uma demonstração para testar o seguinte!
Navegador QQ Privado
Modo de tela inteira
<meta name = "x5-fullscreen" content = "true">
Tela vertical forçada
<meta name = "x5-orientação" content = "retrato">
Tela horizontal forçada
<meta name = "x5-orientação" content = "cenário">
Modo de aplicação
<meta name = "x5-páginas no modo" content = "app">
Navegador UC Privado
Modo de tela inteira
<meta name = "tela completa" content = "sim">
Tela vertical forçada
<meta name = "Orientação da tela" content = "retrato">
Tela horizontal forçada
<meta name = "Orientação da tela" content = "paisagem">
Modo de aplicação
<meta name = "BrowSermode" content = "Application">
outro
Otimizado para dispositivos portáteis, principalmente para alguns navegadores antigos que não reconhecem viewports, como o BlackBerry
<meta name = "handheldfriendly" content = "true">
O antigo navegador da Microsoft
<meta name = "MobileTimized" content = "320">
Windows Phone Clique sem destaques
<meta name = "msApplication-tap-highlight" content = "não">
26. KeyUp, Keydown e KeyPress Support no iOS não é muito bom
O problema é o seguinte: ao usar a pesquisa de entrada por pesquisa difusa, insira palavras -chave no teclado e consulte o fundo do Ajax, retorne os dados e marque as palavras -chave para os dados retornados vermelhos. Não há problema em usar a entrada para monitorar os eventos de teclado no teclado nos navegadores móveis Android, mas fica vermelho muito lentamente nos navegadores móveis iOS. Após a entrada usando o método de entrada, o evento KeyUp não se corresponde imediatamente. Só pode ser correspondente após a exclusão!
Solução:
Você pode usar o evento OnInput do HTML5 para substituir o keyup
<input type = "text" id = "testInput"> <script type = "text/javascript"> document.getElementById ('testInput'). addEventListener ('input', function (e) {var value = e.target.value;}; </script>Então você alcançará um efeito parecido com KeyUp!
27. O problema de definir a entrada do site H5 para tipo = número
Definir o tipo de entrada da página da Web H5 como número geralmente causa três problemas. Um problema é que o atributo maxlength não é fácil de usar. O outro é que, quando o formulário é enviado, é arredondado por padrão. Terceiro, alguns telefones Android têm problemas de estilo.
Depois que o problema é resolvido, atualmente estou usando o JS. do seguinte modo
<input type = "número" oninput = "checkTextLength (this, 10)"> função checkTextLength (obj, comprimento) {if (obj.value.length> length) {obj.value = obj.value.substr (0, length); }}A pergunta 2 é porque os padrões de envio do formulário para formar a verificação, o padrão de etapa é 1 e o atributo de etapa precisa ser definido. Se 2 locais decimais forem mantidos, o método de escrita é o seguinte:
<input type = "número" step = "0,01" />
Em relação à etapa, darei uma breve introdução aqui. No tipo de entrada = número, uma seta para cima e para baixo geralmente será gerada automaticamente. Clicar na seta para cima adicionará uma etapa por padrão. Clicar na seta para baixo reduzirá uma etapa por padrão. A etapa padrão no número é 1. Ou seja, etapa = 0,01, você pode permitir a entrada de 2 locais decimais e clicar nas setas para cima e para baixo para aumentar 0,01 e diminuir 0,01, respectivamente.
Se a etapa e o min forem usados em conjunto, o valor deve estar entre min e max.
Veja o seguinte exemplo:
<input type = "número" step = "3.1" min = "1" />
Quais números podem ser inseridos na caixa de entrada?
Primeiro, se o valor mínimo for 1, você poderá inserir 1.0, o segundo será entrar (1+3,1), ou seja, 4,1 e assim por diante, cada clique na seta para cima e para baixo aumentará ou diminuirá em 3,1 e a entrada de outros números será inválida. Esta é a breve introdução à etapa.
Pergunta 3: Remova o estilo de entrada padrão
input [type = número] {-moz-Appearância: textfield;} input [type = number] ::-webkit-inner-spin-button, input [type = number] ::-webkit-oter-spin-button {-webkit-apearância: nenhum; margem: 0;}28. O estilo do botão de entrada da configuração do iOS será substituído pelo estilo padrão
A solução é a seguinte:
entrada, textarea {borda: 0; -Webkit-Aparência: Nenhum; }Defina o estilo padrão para nenhum
29. Entrada de letra do teclado iOS, capitalização inicial de letra inicial
Solução: Defina as seguintes propriedades
<input type = "text" autocapitalize = "off" />
30. Selecione suspenso Selecione Defina o alinhamento correto
As configurações são as seguintes:
Selecione a opção {direção: rtl;}31. A deformação da inclinação é realizada através da transformação, a rotação girada causará um pouco
Pode ser definido da seguinte maneira:
-Webkit-transform: girar (-4deg) distrata (10deg) traduz (0); Transformar: gire (-4deg) inclinação (10deg) translatez (0); Esboço: 1px RGBA sólido (255.255,255,0)
32. Mobile Clique em Atraso de 300ms
300ms ainda são aceitáveis, mas devemos resolver o problema causado por 300ms. 300ms faz com que a experiência do usuário não seja muito boa. Para resolver esse problema, geralmente usamos os eventos da TAP para substituir os eventos de clique no lado móvel.
Dois JS são recomendados, um é rápido e o outro é tap.js
Para atraso de 300ms, consulte: http://thx.github.io/mobile/300ms-click-delay/
33. Problema de penetração do ponto de extremidade móvel
Exemplos são os seguintes:
<div id = "HAOROOMS"> Teste de evento NOD </div> <a href = "www.vevb.com"> www.vevb.com </a>
A div é a máscara de posicionamento absoluta, e o índice z é maior que a. A tag A é um link na página, ligamos o evento TAP à div:
$ ('#harooms'). on ('tap', function () {$ ('#harooms'). hide ();});Quando clicamos na camada de máscara, a div desaparece normalmente, mas quando clicamos na camada de máscara na tag A, descobrimos que o link A é acionado, o que é chamado de evento pontual.
razão:
O TouchStart Precede Toukend Precede Click. Ou seja, o clique em acionar está atrasado e esse tempo é de cerca de 300 mm. Ou seja, a máscara está escondida após os gatilhos dos nossos gatilhos. No momento, o clique não foi acionado. Após 300ms, nossos gatilhos de clique no link abaixo porque a máscara está oculta.
resolver:
(1) Tente usar o evento Touch para substituir o evento de clique. Por exemplo, use o Evento Toukend (recomendado).
(2) Use FastClick, https://github.com/ftlabs/fastclick
(3) Use o PreventDefault para bloquear o clique de uma tag
(4) Atraso um certo tempo (300ms+) para lidar com eventos (não recomendados)
(5) O acima geralmente pode ser resolvido, mas se realmente não funcionar, será substituído por um incidente de clique.
A seguir, o evento Toukend, como segue:
$ ("#Harooms").34. Elimine o número do garfo no IE10
Input: -ms-Clear {Display: Nenhum;}35. Em relação à otimização de fontes no iOS e OS X (haverá uma fonte inconsistente em negrito nas telas horizontais e verticais, etc.)
O tamanho da fonte será redefinido quando o navegador iOS for paisagístico. Configurar o tamanho do texto-ajuste para ninguém pode resolver o problema no iOS, mas a função de escala de fonte do Safari na versão da área de trabalho será inválida; portanto, a melhor solução é transformar o tamanho do texto a 100%.
-Webkit-text-size-adjust: 100%;-MS-TEXT-Size-Adjust: 100%; Texto-tamanho-adjuste: 100%;
36. Sobre o sistema iOS, Ao entrar em inglês com o método de entrada chinês, um espaço de um sexto pode aparecer entre as letras.
Pode ser removido por regular
this.value = this.value.replace (// u2006/g, '');
37.
Este não é um bug. Como o jogo automaticamente de áudio ou vídeo em páginas da web causará alguns problemas ou consumo desnecessário de tráfego para os usuários, os sistemas Apple e Android geralmente proíbem a reprodução automática e desencadeavam a reprodução usando o JS. Ele deve ser acionado pelo usuário antes que ele possa ser reproduzido.
Solução: primeiro toque no usuário Touchstart, gatilho de reprodução e pausa (o áudio começa a carregar e use o JS para operá -lo novamente).
Código da solução:
document.addeventListener ('touchstart', function () {document.getElementsByTagName ('Audio') [0] .Play (); document.getElementsByTagName ('Audio') [0] .Pausa ();});38. O problema do espaço reservado não ser suportado na data de entrada móvel html5
Eu não acho que exista uma boa solução para isso, use o seguinte método
A cópia do código é a seguinte:
<entrada de placeholder = "date" type = "text" onfocus = "(this.type = 'date')" id = "date">>
Alguns navegadores podem precisar clicar duas vezes!39. Alguns modelos têm entrada na pesquisa de tipo e seu método de modificação de estilo de botão de fechamento é fornecido.
Alguns modelos de controles de entrada de pesquisa virão com um botão de fechamento (um elemento pseudo-elemento) e, geralmente, para ser compatível com todos os navegadores, implementaremos um por nós mesmos. Neste momento, o método para remover o botão de fechamento nativo é
#Search ::-Webkit-Search-Cancel-Button {Display: Nenhum; }Se você deseja usar o botão Fechar nativo e deseja que ele esteja em conformidade com o estilo de design, pode modificar o estilo desse elemento pseudo-elemento.
40. Incentive a opção de expandir
Método Zepto:
$ (sltelement) .trrgger ("Mousedown");Método JS nativo:
função showDropdown (slTelement) {var event; Event = document.createevent ('mouseevents'); Event.initMouSeEvent ('Mousedown', verdadeiro, verdadeiro, janela); slteLement.dispatchEvent (evento);};