No passado, quando eu trabalhava no lado do PC, também encontrava problemas de compatibilidade, mas, para ser sincero, tudo que eu tinha em mente eram problemas do IE e não havia nada para prestar atenção especial. não fui bom em resumir. Agora estou trabalhando no lado mobile (originalmente achei o lado mobile muito fácil, então não levei a sério), então, me enganei, paguei pelo meu desprezo e arrogância!
Recentemente, encontrei alguns bugs de compatibilidade e encontrei informações na Internet.
Vamos falar primeiro sobre a janela de visualização
Modelo primeiro
<meta charset=utf-8><!--O objetivo principal é forçar a largura do documento e a largura do dispositivo a permanecer 1:1, com largura máxima de 1,0, e proibir o dimensionamento da tela. --><meta content=width=device-width, escala inicial=1.0, escala máxima=1.0, escalável pelo usuário=no name=viewport><!--Esta também é uma marca própria do iPhone, permitindo tela inteira navegando. --><meta content=yes name=apple-mobile-web-app-capable><!--A marca própria do iphone, o estilo da barra de status na parte superior do iphone. --><meta content=black name=apple-mobile-web-app-status-bar-style><!--Desativar o reconhecimento automático de números como números de telefone Isso é mais útil, porque uma sequência de números será exibida. como o azul, as adições de estilo a outras cores também são ineficazes. --><meta content=telephone=no name=format-detection><!--Desativar reconhecimento de e-mail--><meta content=email=no name=format-detection>
É melhor adicionar canto superior esquerdo ou 0 0 ao escrever imagens de fundo, caso contrário, é fácil pular ao escrever efeitos de movimento.
A cópia e o texto selecionado são proibidos
.el { -webkit-user-select: nenhum; -moz-user-select: nenhum; -khtml-user-select: nenhum;Há um bug no posicionamento fixo dos celulares Apple. Verifique se overflow-x:hidden está definido no html e no corpo;
Defina estilos especiais para celulares com diferentes tamanhos de tela
Tela somente @media e (largura mínima do dispositivo: 320px) e (largura máxima do dispositivo: 375px){}O suporte para os eventos de entrada do teclado keyup, keydown e keypress no IOS não é muito bom. É possível usar a entrada para monitorar o evento keyup do teclado no navegador móvel Android. navegador, o keyup não responde imediatamente Os eventos só podem ser respondidos após a exclusão.
Método: você pode usar o evento oninput do html5 para substituir keyup
<input type=text id=testInput><script type=text/javascript> document.getElementById('input').addEventListener('input', function(e){ var value = e.target.value; });< /script>A configuração do estilo do botão de entrada no iOS será substituída pelo estilo padrão
A solução é a seguinte:
entrada, área de texto { borda: 0; -webkit-aparência: nenhum;}O layout Flex não oferece suporte ao atributo flex-wrap:wrap para versões anteriores do Android, mas o sistema iOS oferece suporte ao atributo line wrap. Obviamente, não use quebras de linha e, em vez disso, use outros métodos.
.box{ display: -webkit-box; /* Sintaxe da versão antiga: Safari, iOS, navegador Android, navegadores WebKit mais antigos */ display: -moz-box; -ms-flexbox; /* Sintaxe de versão mista: IE 10 */ display: -webkit-flex; /* Sintaxe de nova versão: Chrome 21+ */ display: flex; 12.1, Firefox 22+ */}O atributo placeholder de input posicionará o texto para cima
altura da linha: (mesma altura da caixa de entrada) --- solução para PC
altura da linha: normal --- Solução móvel
Após inserir type=number, setas para cima e para baixo aparecem no lado do PC
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none !margem importante: 0;}Habilite telefones celulares Android e iOS para abrir a câmera e selecionar a função de álbum de fotos
<input class=js_upFile cover1 type=file name=cover accept=image/* capture=camera multiple/>$(function () { //Obter o userAgent do navegador e convertê-lo para letras minúsculas var ua = navigator.userAgent.toLowerCase() ; //Determine se é um telefone Apple, se for verdade var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if (isIos) { $(input:file).removeAttr(capture };})O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.