Para resolver os problemas de cross-browser no navegador Safari durante o desenvolvimento de um site para dispositivos móveis, foram apresentadas soluções para problemas de cálculo da altura da viewport e deslocamento da IU devido ao teclado virtual.
O problema da altura da viewport pode ser resolvido usando dvh ou svh, o problema do teclado virtual pode ser resolvido usando min-height, aplicando prefixos de fornecedor e usando JavaScript para controle dinâmico.
Ao desenvolver sites para dispositivos móveis Safari, é necessário levar em consideração o uso de prefixos de fornecedor, as limitações de capacidade do LocalStorage e SessionStorage (cerca de 5 MB) e a impossibilidade de compartilhar armazenamento entre abas.
Escrevi muito e cliquei em salvar, mas apareceu um erro 404 e tudo sumiu ㅠㅠ
Vou registrar dois problemas chatos de cross-browser que enfrentei ao desenvolver uma web móvel, e outros problemas a serem considerados.
Quero registrar isso.
Problema de cálculo de altura do viewport devido à barra de endereço e barra de navegação do próprio navegador
Safari e Samsung Internet possuem uma barra de navegação inferior integrada ao navegador. A menos que show/hide seja definido especificamente, ela aparece ao rolar para baixo e desaparece ao rolar para cima.
O problema é que isso faz com que o viewport não seja fixo e mude.
Por exemplo, se a altura for definida como 100vh, o layout será renderizado corretamente se não houver barra de navegação, mas se a barra de navegação aparecer, ela ocultará a interface do usuário.
Para resolver esse problema,
1. Use dvh.
Dvh é um viewport dinâmico que reflete automaticamente as alterações sempre que a altura do viewport muda. Portanto, é possível lidar com alterações no layout da interface do usuário devido à presença ou ausência da barra de endereço ou barra de navegação inferior.
2. Svh também pode ser considerado.
Svh é a altura da área de interface do usuário pura, excluindo a barra de endereço ou navegação. Em situações em que a barra de endereço ou navegação provavelmente aparecerá, usar svh é mais preciso.
Problema de deslocamento da interface do usuário devido ao teclado virtual ao selecionar a entrada
No Safari móvel, ao selecionar a entrada, ocorreu um problema em que os elementos da interface do usuário existentes foram deslocados devido ao teclado virtual. Em outros navegadores, o teclado virtual geralmente aparece de forma absoluta, mas no Safari móvel, ele ocupa espaço como se a propriedade display: block tivesse sido aplicada.
No Safari, este é um problema que ocorre porque a altura do viewport é ajustada dinamicamente quando o teclado virtual é exibido, e os elementos que usam a unidade vh são reajustados. Para resolver isso,
1. Use min-height.
Defina uma altura mínima para evitar que a interface do usuário seja deslocada.
html, body{height:100%;min-height:100vh;/* Define uma altura mínima fixa */overflow: hidden;}
2. Aplique prefixos de fornecedor (descrito abaixo).
html, body{height: -webkit-fill-available;/* Compatibilidade com Safari */}
Insira o atributo aplicado a navegadores específicos, como Safari.
3. Controle dinamicamente o viewport usando JavaScript.
window.addEventListener('resize',()=>{if(window.innerHeight<500){// Código a ser executado quando o teclado aparecerdocument.body.classList.add('keyboard-visible');}else{// Código a ser executado quando o teclado desaparecerdocument.body.classList.remove('keyboard-visible');}});
Adicione um ouvinte de eventos de redimensionamento para detectar quando o viewport muda e aplique o estilo apropriado.
3-1. Controle a posição quando o evento focusin ocorrer.
Além disso, pesquisei alguns pontos a serem considerados ao desenvolver uma web móvel para Safari.
1. Ao usar alguns atributos, use prefixos de fornecedor.
* Um prefixo de fornecedor é um prefixo que permite que um navegador entenda e renderize um atributo css específico, e permite que o css implementado de forma diferente em cada navegador seja aplicado conforme o previsto. Isso garante consistência entre navegadores e compatibilidade com navegadores mais antigos.
Tipos
-webkit-: Chrome, Safari etc. -moz-: Mozilla Firefox -ms-: Internet Explorer e Edge -o-: Opera
Os atributos que geralmente requerem prefixos de fornecedor são os seguintes:
Além disso, o Safari limita o tamanho do LocalStorage e SessionStorage a aproximadamente 5 MB e não compartilha o espaço de armazenamento entre as guias, portanto, é necessário cuidado.
ps. Estou muito triste porque o artigo que escrevi foi perdido. Embora o artigo que eu publiquei não seja de alta qualidade,,,ㅠ Tenho que salvar temporariamente.