Corrigir a sobreposição do teclado móvel com o VisualViewPort

INTRODUÇÃO As entradas de bate -papo de fundo são enterradas quando o teclado móvel é aberto. A página diminui visualmente, mas nem o VH nem o DVH rastreiam o teclado virtual. Sua opinião acaba embaixo do teclado. Para resolver isso, podemos usar a API do VisualViewPort para sincronizar a altura do Visual Viewport com uma variável CSS. Eu bati neste prédio Sparka. A correção está no repo Sparka Github se você deseja uma referência do mundo real. O que ajuda parcialmente (mas não é universal), você verá isso referenciado e está correto no espírito: name = “viewport” content = “width = largura do dispositivo, escala inicial = 1,0, interactive-widget = redimessa-content” /> Digite o modo de tela cheia a saída do modo de tela cheia Chromium /Android o suporta. O iOS Safari ainda não homenageia o Widget interativo = REDIMESS-CONTENT. Confiar nisso sozinho não manterá o teclado do layout – seguro no iOS. A correção robusta use a API do Visual Viewport para refletir a altura visível real em uma variável CSS (por exemplo-App-tely). Em seguida, consuma essa variável em vez de DVH/VH. 1. Componente do cliente minúsculo para Sync-App-Hight // Components/ViewPort-Resize-observer.tsx ‘Use o cliente’ import {useeffft} de ‘react’ export function ViewportResizeObServer () {useefect () => {function updatepHeight () {Try {altura Window.VisualViewport? vv.adDeventListener === ‘function’) {vv.addeventListener (‘redimensionar’, updateApHeight) vv.addeventlistener (‘scroll’, updateApHeight)} window.addeventListener (‘resizida’, updatepHePHELT) ‘function’) {vv.RemoveEventListener (‘redimensionar’, updateApHeight) vv.removeEventListener (‘roll’, updateApHeight)} window.removeEventListener (‘redemimes’, updateApHeight)}}}, []) retornar nulo} Digite o modo de saída de tela cheia de tela cheia 2. Monte-o uma vez (Next.js app/layout.tsx) // app/layout.tsx (snippets) Importar Type {metadata, viewport} de ‘next’ import {ViewporTesizeObServer} de ‘@components/viewport-sesize-obra {ViewPerSizeObServer} de’@components/viewport-sesize- App ‘} Exportar Viewport const: Viewport = {MaximumScale: 1, // InteractiveWidget:’ REDIMES-CONTENT ‘, // Opcional; iOS Safari não universal} Exportar função padrão rootlayout ({crianças}: {crianças: react.reactnode}) {return (return (

{crianças} corpo> html>)} Digite o modo de saída de tela cheia 3. Use a variável em vez de dvh // componentes/chat.tsx (snippet)