Uma solução completa para adaptação móvel
Para obter a experiência móvel perfeita, é necessário:
- Layout responsivoModelos com estilos CSS adaptativos incorporados e barras de ferramentas que se ajustam dinamicamente a layouts compatíveis com dispositivos móveis
- Otimização do toqueBloco de conteúdo: o bloco de conteúdo lida com o zoom de 48 x 48 px para garantir a capacidade de clicar, o pressionamento longo aciona menus grandes para cima/para baixo
- Compatibilidade com o teclado virtualAjuste automático da altura da área de edição, ouvindo o evento de redimensionamento via JavaScript para evitar a oclusão do teclado.
- otimização do desempenhoLimite o número máximo de cursores coordenados exibidos no celular (recomenda-se 5 ou menos) para reduzir a carga de renderização.
Recomendações adicionais: emindex.css
adicionar@media
A consulta ajusta o tamanho da fonte para garantir a legibilidade no celular. Os testes mostram que essa solução tem bom desempenho em uma variedade de dispositivos, desde o iPhone SE até o iPad Pro.
Essa resposta foi extraída do artigoModelo Tiptap Notion-like: integração rápida do editor de colaboração Notion-likeO